I need to send an html email but the images show gaps on mobile. I have used Campaign Monitor's inliner but still the images show gaps on mobile. It is absolutely fine on my laptop.
I'm using Gmail client to check the email on both laptop and mobile.
Can someone please help?
Code:
<!DOCTYPE HTML>
<head>
<title>DR. EARTH – Results on Wheat</title>
<meta name="keywords" content="Dr. Earth results on wheat, plant growth promoter, extracted from sapropel, it really works, better root growth, increase in yield by 7.5 quintals per acre, arrest of 'kamal bant' disease, increases crop yield by 30%, improves quality of produce, improves resistance to diseases, VRS Agritech, Designed by BK Suru">
<meta name="author" content="Bhavesh Kumar Suru - www.BKsuru.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 2010 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, user-scalable=yes, height=device-height"/>
<link rel="icon" href="favicon.png" type="image/x-icon">
<style type="text/css">
html,body{min-height:100%}
body {
background-color: #999999 !important;
}
img.map, map area{
outline: none;
}
img {
display: block !important;
}
.border {
border:solid #999 thin;
}
.shadow {
-webkit-box-shadow: 1px 1px 10px 2px #777;
-moz-box-shadow: 1px 1px 10px 2px #777;
box-shadow: 0px 2px 5px 2px #777;
}
.rounded {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
border-radius: 15px 15px 15px 15px !important;
}
.rounded-top {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-radius: 15px 15px 0px 0px !important;
}
.rounded-bottom {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
border-radius: 0px 0px 15px 15px !important;
}
p {
font-family:Verdana, Geneva, sans-serif;
letter-spacing:0.025em;
text-align: center;
font-size:12px !important;
color:#222;
margin-top:15px;
margin-bottom:15px;
line-height:18px !important;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="min-height:100%;background-color:#999999 !important;" >
<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" ><a href="http://www.drearth.in/campaigns/results-on-wheat" target="_new" style="text-decoration:none;color:#000;" >Open this email in browser</a></p>
<table width="800" height="1713" align="center" cellpadding="0" cellspacing="0" id="Table_01" border="0" class="border shadow rounded" style="border-width:thin;border-style:solid;border-color:#999;-webkit-box-shadow:1px 1px 10px 2px #777;-moz-box-shadow:1px 1px 10px 2px #777;box-shadow:0px 2px 5px 2px #777;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:15px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-radius:15px 15px 15px 15px !important;" >
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_01.jpg" alt="" width="800" height="57" border="0" usemap="#Map5" class="rounded-top" style="display:block !important;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;border-radius:15px 15px 0px 0px !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_02.jpg" alt="" width="800" height="57" border="0" usemap="#Map4" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_03.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_04.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_05.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_06.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_07.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_08.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_09.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_10.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_11.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_12.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_13.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_14.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_15.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_16.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_17.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_18.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_19.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_20.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_21.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_22.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_23.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_24.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_25.jpg" width="800" height="58" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_26.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_27.jpg" width="800" height="57" alt="" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_28.jpg" alt="" width="800" height="57" border="0" usemap="#Map3" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_29.jpg" alt="" width="800" height="57" border="0" usemap="#Map" style="display:block !important;" ></td>
</tr>
<tr>
<td>
<img src="http://www.drearth.in/campaigns/results-on-wheat/images/index_30.jpg" alt="" width="800" height="57" border="0" usemap="#Map2" class="rounded-bottom" style="display:block !important;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:15px;-webkit-border-top-left-radius:0px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-radius:0px 0px 15px 15px !important;" ></td>
</tr>
</table>
<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" >If you do NOT wish to receive any future communication from <b>Dr. Earth</b> <br>then you can unsubscribe by email to <a href="mailto:unsubscribe#drearth.in?subject=Please unsubscribe me from your mailing list" style="text-decoration:none;color:#000;" >unsubscribe#drearth.in</a></p>
<p style="font-family:Verdana, Geneva, sans-serif;letter-spacing:0.025em;text-align:center;font-size:12px !important;color:#222;margin-top:15px;margin-bottom:15px;line-height:18px !important;" >© 2015 <b>VRS Agritech Pvt. Ltd.</b> All Rights Reserved</p>
<map name="Map">
<area shape="rect" coords="135,39,319,60" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
<area shape="rect" coords="565,14,769,33" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
<area shape="rect" coords="502,40,767,62" href="mailto:customercare#drearth.in" target="_new" style="outline-style:none;" >
<area shape="rect" coords="30,0,127,48" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
</map>
<map name="Map2">
<area shape="rect" coords="3,21,301,53" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
<area shape="rect" coords="663,21,795,53" href="http://www.bksuru.com" target="_tab" style="outline-style:none;" >
</map>
<map name="Map3">
<area shape="rect" coords="30,51,125,67" href="http://www.vrsagritech.com" target="_tab" style="outline-style:none;" >
</map>
<map name="Map4">
<area shape="rect" coords="209,-1,594,44" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
</map>
<map name="Map5">
<area shape="rect" coords="209,30,594,66" href="http://www.drearth.in" target="_tab" style="outline-style:none;" >
</map>
</body>
</html>
Mobile screenshot:
Laptop screenshot:
Used DIVs instead and style="display:block;" for each image, and it worked like a charm.
Related
I have a view with in the center a GridPane which fills the whole screen. The GridPane has percentages defined on all rows and all columns. On my Nexus 5X the layout works normal. When I install the app on a Zebra Scanner TC8000, which is an Android 4.4.3, the percentages are not respected. Instead roughly the upper 50% is shown and the rest disappears much like the screen is too small.
The resolution on the Zebra is much less of course, 480x800 vs 1080x1920 on the 5X but I expected that the components would scale down according to the percentages of the GridPane. Does anyone know what's going wrong.
Edit: I tried many different things and the best code I got atm is the code below. The problems this code has are:
- The first row takes up 55% of the screen height instead of the 30% that is configured.
- The components leave the screen in width by approximatly 50 - 100 pixels. If this one is solved the layout becomes acceptable.
<?xml version="1.0" encoding="UTF-8"?>
<?import com.gluonhq.charm.glisten.mvc.View?>
<?import javafx.geometry.Insets?>
<?import javafx.geometry.Rectangle2D?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<View fx:id="product" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.essers.pxl2016.scan.application.gluon.views.ProductPresenter">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<top>
<HBox fx:id="buttonHBox" alignment="CENTER_LEFT" cacheShape="false" BorderPane.alignment="CENTER">
<children>
<Label fx:id="descriptionLabel">
<font>
<Font name="System Bold" size="15.0" />
</font>
<HBox.margin>
<Insets />
</HBox.margin>
</Label>
<Region HBox.hgrow="ALWAYS" />
<Button fx:id="exitButton" mnemonicParsing="false" text="Exit">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
</children>
</HBox>
</top>
<center>
<GridPane>
<columnConstraints>
<ColumnConstraints fillWidth="false" percentWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints percentHeight="20.0" vgrow="SOMETIMES" />
<RowConstraints percentHeight="50.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<GridPane hgap="4.0" vgap="4.0">
<columnConstraints>
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" />
<ColumnConstraints halignment="LEFT" hgrow="SOMETIMES" percentWidth="45.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="25.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="7.5" vgrow="SOMETIMES" />
<RowConstraints percentHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints percentHeight="5.0" vgrow="SOMETIMES" />
<RowConstraints percentHeight="7.5" vgrow="SOMETIMES" />
<RowConstraints percentHeight="45.0" valignment="CENTER" vgrow="ALWAYS" />
<RowConstraints percentHeight="5.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<VBox alignment="CENTER" spacing="5.0" GridPane.rowIndex="4">
<children>
<Button fx:id="plusButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#plusClicked" text="+" textAlignment="CENTER" VBox.vgrow="ALWAYS">
<VBox.margin>
<Insets />
</VBox.margin>
</Button>
<Button fx:id="minButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#minClicked" text="-" textAlignment="CENTER" VBox.vgrow="ALWAYS">
<VBox.margin>
<Insets />
</VBox.margin>
</Button>
</children>
<GridPane.margin>
<Insets />
</GridPane.margin>
</VBox>
<Label text="Count" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
<font>
<Font size="11.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" nodeOrientation="LEFT_TO_RIGHT" text="Scanned barcode" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="3">
<font>
<Font size="11.0" />
</font>
<GridPane.margin>
<Insets left="5.0" />
</GridPane.margin>
</Label>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#okClicked" text="OK" GridPane.columnIndex="3" GridPane.rowIndex="4">
<GridPane.margin>
<Insets />
</GridPane.margin>
</Button>
<Label text="Target">
<font>
<Font size="11.0" />
</font>
</Label>
<Label text="Scanned" GridPane.columnIndex="1">
<font>
<Font size="11.0" />
</font>
</Label>
<Label alignment="CENTER" text="Target barcode" GridPane.columnIndex="2">
<font>
<Font size="11.0" />
</font>
<padding>
<Insets left="5.0" />
</padding>
</Label>
<TextField fx:id="targetCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="5" GridPane.rowIndex="1" />
<TextField fx:id="countTextField" alignment="CENTER" maxHeight="1.7976931348623157E308" text="1" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="4" GridPane.rowSpan="2" GridPane.vgrow="ALWAYS" />
<TextField fx:id="targetBarcodeTextField" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" GridPane.columnIndex="2" GridPane.rowIndex="1">
<opaqueInsets>
<Insets left="5.0" />
</opaqueInsets>
</TextField>
<TextField fx:id="scannedCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<TextField fx:id="scannedBarcodeTextField" maxHeight="1.7976931348623157E308" onKeyPressed="#handleKeyPress" GridPane.columnIndex="2" GridPane.rowIndex="4" GridPane.rowSpan="2">
<opaqueInsets>
<Insets left="5.0" />
</opaqueInsets>
</TextField>
<Button fx:id="skipButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#skipClicked" text="Skip" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" />
</children>
</GridPane>
<GridPane GridPane.rowIndex="1">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" percentWidth="29.0" prefWidth="0.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="31.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="15.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="25.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="Id:" />
<Label text="Location:" GridPane.rowIndex="1" />
<Label text="Description:" GridPane.rowIndex="2" />
<Label text="Comment:" GridPane.rowIndex="3" />
<Label text="Status:" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Label text="Unit:" GridPane.columnIndex="2" />
<Label fx:id="idLabel" GridPane.columnIndex="1" />
<Label fx:id="locationLabel" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label fx:id="longDescriptionLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="2" />
<Label fx:id="commentLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="3" />
<Label fx:id="statusLabel" GridPane.columnIndex="3" GridPane.rowIndex="1" />
<Label fx:id="unitLabel" GridPane.columnIndex="3" />
</children>
</GridPane>
<VBox GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
<children>
<Pane fx:id="pane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<children>
<StackPane fx:id="imagePane" alignment="TOP_LEFT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
<children>
<ImageView fx:id="imageView" onMouseClicked="#imageClicked" pickOnBounds="true" preserveRatio="true" StackPane.alignment="CENTER">
<viewport>
<Rectangle2D />
</viewport>
</ImageView>
<Button fx:id="videoButton" disable="true" mnemonicParsing="false" onAction="#videoButtonClicked" text="Video" visible="false" StackPane.alignment="TOP_RIGHT">
<StackPane.margin>
<Insets right="3.0" top="3.0" />
</StackPane.margin>
</Button>
</children>
</StackPane>
</children>
</Pane>
<Label fx:id="figLabel" alignment="TOP_LEFT" />
</children>
</VBox>
</children>
</GridPane>
</center>
</View>
You can reproduce the issue if you run your app on Desktop, and set the stage dimensions to 320x600:
#Override
public void postInit(Scene scene) {
scene.getWindow().setWidth(320);
scene.getWindow().setHeight(600);
}
Using ScenicView you'll notice that the view has 370 px width, because the minimum width for the top inner grid is 360 px.
While you haven't set any minimum value for any control, you can see that the styled buttons don't resize down properly, as the minimum width is set by css.
Try adding this to remove their minimum width value:
.view {
}
.button {
-fx-min-width: 10;
}
Now the view should be within the bound of the mobile screen:
The problem was that I put a button in a small width column. In SceneBuilder and on devices width high resolutions, the layout looked fine but when displayed on a small screen, the button became too wide for the column. In response, the View was resized to a bigger maximum width and because the width already filled the screen, it now exceeded the screen.
Imo the button should be resized or scaled down to fit the GridPane cell. Also, the minimum size of the button used in the calculations is quite wide, even though my button only had a plus-sign in it.
Does any body know how to achive the output of the XAML below to HTML5 and CSS3:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="33" />
<RowDefinition Height="29" />
<RowDefinition Height="*"/>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="98" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="98" />
</Grid.ColumnDefinitions>
<Border x:Name="header" Grid.Row="0" Grid.Column="1"/>
<Border x:Name="mainNav" Grid.Row="1" Grid.Column="1"/>
<Border x:Name="secondNav" Grid.Row="2" Grid.Column="1"/>
<Border x:Name="body" Grid.Row="3" Grid.Column="1"/>
<Border x:Name="footer" Grid.Row="4" Grid.Column="1"/>
</Grid>
Thanks
If I understand you correctly, you just want this code snipped translated to HTML/CSS. A one-to-one translation is shown below.
However, HTML/CSS is a different medium than XAML. E.g. there is no easy way to do Width="*" in CSS and there is no grid-system built in, so you have to build it with floats (this is for historical reasons, CSS was invented to style text documents, not build layouts). So I would recommend that you look at a more web-friendly solution: a widely-used HTML/CSS scaffolding framework with rows and columns is Bootstrap.
Crude one-to-one translation:
<!DOCTYPE html>
<html>
<head>
<style>
.grid > div > div {
float: left;
outline: 1px solid black;
height: 100%;
min-width: 30px;
}
.header {
height: 100px;
}
.mainNav {
height: 33px;
}
.secondNav {
height: 29px;
}
.body {
height: 30px;
}
.footer {
height: 75px;
}
.grid-column-1 {
width: 98px;
}
.grid-column-2 {
}
.grid-column-3 {
width: 98px;
}
</style>
</head>
<body>
<div class="grid">
<div class="header">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="mainNav">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="secondNav">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="body">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="footer">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
</div>
</body>
</html>
I am having a repeater like this in asp.net
<asp:Repeater runat="server" ID="rptrExperience" OnItemDataBound = "itembound">
<ItemTemplate>
<div class="experience">
<a><asp:Label ID="Label13" class="accounts-link" runat="server" Text='<%#Eval("JobTitle") %>'></asp:Label></a> <br />
<a> <asp:Label ID="Label14" class="accounts-link" runat="server" Text='<%#Eval("Company") %>'></asp:Label></a><br />
<%-- <asp:Label ID="Label1" runat="server" Text='<%#Eval("town") %>'></asp:Label><br />
<asp:Label ID="Label15" runat="server" Text='<%#Eval("Location") %>'></asp:Label><br />--%>
<asp:Label ID="Label16" runat="server" Text='<%#Eval("Period") %>'></asp:Label><br />
<asp:Label ID="Label17" runat="server" Text='<%#Eval("Description") %>'></asp:Label><br />
<asp:Label ID="lblname" runat="server"></asp:Label>
<a id="ae" href="#?w=750" class=" floatleft poplight" rel="popup6" runat ="server" >Endorse <asp:Label ID="en" runat="server" Text='<%#Name(Eval("UserId")) %>'></asp:Label>'s Work in <asp:Label ID="en1" runat="server" Text='<%#Eval("Company") %>'></asp:Label></a>
<a id="te" runat="server" rel="tooltip" title="You can endorse your collegue or friend you have worked together.This is your professional opinion so keep it professional.Tip: Keep it clear and simple, Your friend can delete your endorsementif they are innappropriate. "><img src="images/icon-tips.png" width="14" height="15" alt="tips" /></a>
</div>
</ItemTemplate>
</asp:Repeater>
and binding data using linq
I want the same to displayed in a wpf application. I am new to wpf can any one help me out
I think ItemsControl will probably fit your need:
<ItemsControl ItemsSource="{Binding ...}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- Template goes here ... -->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have two variations of an extremely simple piece of XAML. First here is the variant painting the background of a canvas with a solid colour brush.
<UserControl x:Class="CanvasBackground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot">
<Canvas x:Name="SeedCanvas">
<Canvas.Background>
<SolidColorBrush Color="Aquamarine" />
</Canvas.Background>
</Canvas>
</Grid>
</UserControl>
This is hosted into a fairly simple HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CanvasBackground</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/CanvasBackground.xap"/>
<param name="background" value="transparent" />
</object>
</div>
</form>
</body>
</html>
When I compile and open the page I see what I expect, an empty aquamarine page. However if I change the XAML to use an ImageBrush in place of the SolidColorBrush like this the page is black. The image shows in the design view (presumably because that has the height and width for design time set) but not in the page.
<UserControl x:Class="CanvasBackground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot">
<Canvas x:Name="SeedCanvas">
<Canvas.Background>
<ImageBrush ImageSource="/images/Autum.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Grid>
</UserControl>
The key was in the property 'Build Action' of the image in the Silverlight project. I had it set to 'Resource' and changing it to 'Content' fixed the issue.
Silverlight virgin here. How do I make the usercontrol surrounding my grid automatically resize to accomodate the grid width inside? Currently the usercontrol is displaying at about 300 or 400 pixels when the browser window is much wider. It renders both vertical and horizontal scroll bars around the data grid which is ugly. I want to set the control width to "100%", but this does not appear to be supported. What am I missing?
Here's my xaml so far:
<UserControl x:Class="RichMedia.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid Name="dataGrid1" AutoGenerateColumns="False"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
DataContext="{Binding}" />
</Grid>
</UserControl>
EDIT: I should add that I am using the default containers in Visual Studio 2010 created when adding a silverlight app to an existing Web Application Project.
Below is the markup from the hosting page:
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
...
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body { padding: 0; margin: 0; }
html, body { height: 100%; overflow: hidden; }
#silverlightControlHost { height: 100%; text-align:center; }
</style>
<script type="text/javascript" src="Scripts/Silverlight.js"></script>
...
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/RichMedia.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
You need place Width:100% and Height:100% in the style of the object tag in the HTML holding it. You also need to make sure the containing element (probably the body) has the height of the view port. This is done by ensuring the style "height:100%; overflow:hidden;" is on the html tag and the body tag. Put margin:0px on the body and place the attribute scroll="no" on the body as well for good measure. Now your Silverlight control owns and sizes to the browsers client window area.
Also remove the Width="Auto" and Height="Auto" from the UserControl.