google map api v3 and kml = zoom doesn't work - google-maps-api-3
So, I have html file with google map api v3 and another kml file together connected. If i disconnect kml from html zoom is working.
Here is a sample:
http:/mini.hr/test.php
And here is sa sample of html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=******&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(45.330963,14.44046);
var mapOptions = {
zoom: 16,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//add KML
var ctaLayer = new google.maps.KmlLayer('http://***/***.kml');
ctaLayer.setMap(map);
//var nyLayer = new google.maps.KmlLayer('http://***/***.kml',
//{suppressInfoWindows: true});
//nyLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
And here is kml file:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Folder>
<name>Moja mjesta</name>
<Style>
<ListStyle>
<listItemType>check</listItemType>
<ItemIcon>
<state>open</state>
<href>:/mysavedplaces_open.png</href>
</ItemIcon>
<ItemIcon>
<state>closed</state>
<href>:/mysavedplaces_closed.png</href>
</ItemIcon>
<bgColor>00ffffff</bgColor>
<maxSnippetLines>2</maxSnippetLines>
</ListStyle>
</Style>
<Document>
<name>Legend</name>
<open>1</open>
<Style id="Style10">
<LineStyle>
<color>7fffffff</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<color>66938ab5</color>
</PolyStyle>
</Style>
<StyleMap id="Style11">
<Pair>
<key>normal</key>
<styleUrl>#Style10</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#Style1</styleUrl>
</Pair>
</StyleMap>
<Style id="Style1">
<LineStyle>
<color>7fffffff</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<color>66938ab5</color>
</PolyStyle>
</Style>
<Style id="Style12">
<LineStyle>
<color>7fffffff</color>
<width>0.2</width>
</LineStyle>
<PolyStyle>
<color>66938ab5</color>
<outline>0</outline>
</PolyStyle>
</Style>
<Style id="Style100">
<LineStyle>
<color>7fffffff</color>
<width>0.2</width>
</LineStyle>
<PolyStyle>
<color>66938ab5</color>
<outline>0</outline>
</PolyStyle>
</Style>
<StyleMap id="Style110">
<Pair>
<key>normal</key>
<styleUrl>#Style100</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#Style12</styleUrl>
</Pair>
</StyleMap>
<Folder>
<name>MJESNI_ODBORI</name>
<open>1</open>
<Placemark>
<name>Zamet</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Sveti Nikola</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Mlaka</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Potok</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Turnić</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Podmurvice</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Banderovo</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Škurinjska Draga</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Kantrida</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Grbci</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Srdoči</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Gornji Zamet</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Pehlin</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Škurinje</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Drenova</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Luka</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Pećine</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Krimeja</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Vojak</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Podvežica</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Gornja Vežica</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Brajda-Dolac</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Belveder</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Školjić</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Centar-Sušak</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Bulevard</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Kozala</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Grad Trsat</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Orehovica</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Draga</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Sveti Kuzam</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Brašćine-Pulac</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Pašac</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
****
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Svilno</name>
<styleUrl>#Style11</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
***
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</Folder>
</kml>
Hope somebody can figure where is my problem of zooming :) tnx
set the preserveViewport-option of both KML-layers to true
Related
stickyHeader on Primefaces datatable displays duplicate header in layoutUnit
When I use stickyHeader on a datatable inside of a layoutUnit the headers are displayed twice, with the second header slightly offset vertically and horizontally. When I use the same table not in a layoutUnit it displays correctly. When I scroll down and the header sticks to the top it displays correctly. I've tried examining the generated html and css but am unable to fix it.
Using Primefaces 6.1.
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet library="css" name="primefaces.css"/>
</h:head>
<p:layout id="lo1">
<p:layoutUnit id="lu1" position="center">
<p:dataTable value="#{simpleController.simpleObjects}" var="simpleObject" stickyHeader="true">
<p:column headerText="attr1">
<p:outputLabel value="#{simpleObject.attr1}"/>
</p:column>
<p:column headerText="attr2">
<p:outputLabel value="#{simpleObject.attr2}"/>
</p:column>
<p:column headerText="attr3">
<p:outputLabel value="#{simpleObject.attr3}"/>
</p:column>
</p:dataTable>
</p:layoutUnit>
</p:layout>
</html>
And this is the same table but not in a layoutUnit
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet library="css" name="primefaces.css"/>
</h:head>
<p:dataTable value="#{simpleController.simpleObjects}" var="simpleObject" stickyHeader="true">
<p:column headerText="attr1">
<p:outputLabel value="#{simpleObject.attr1}"/>
</p:column>
<p:column headerText="attr2">
<p:outputLabel value="#{simpleObject.attr2}"/>
</p:column>
<p:column headerText="attr3">
<p:outputLabel value="#{simpleObject.attr3}"/>
</p:column>
</p:dataTable>
</html>
Email background image
I would like add background image to mail email. When i test on MailChimp, the preview is good (with inline style and minified).
But if i run test on my mail (Gmail APP and Outlook), i've no background. If i open the mail in browser, my background is show.
I've test with this :
background="http://domaine.com/myimage.jpg"
and
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
No result. Anyone have idea ?
My code for backgrounds in emails after 1,5 years of blood, sweat and tears:
Important to know is that almost everything in this piece of code is important!. From the DOCTYPE, html tag's xml attributes, conditional comments and css in the head,... Just use this as a starting point for your next email.
Important tip:
Use the attr background="" on a td, not on a table or any other element.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>10 well-formed<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>conditional comments<!-- --><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="mytitle" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<style type="text/css">
v\:* {
behavior: url(#default#VML);
display: inline-block
}
o\:* {
behavior: url(#default#VML);
display: inline-block
}
w\:* {
behavior: url(#default#VML);
display: inline-block
}
.ExternalClass{
width:100%;
}
table{
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img{
-ms-interpolation-mode:bicubic;
}
.ReadMsgBody{
width:100%;
}
</style>
</head>
<body width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" width="100%" height="1000" valign="top" style="background-color:#cccccc;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000;height:1000px;">
<v:fill type="tile" src="https://i.stack.imgur.com/LCCB6.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<br /><br />
<div>
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" height="100%">
<tr>
<td align="center" valign="top" width="600" height="100%">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" height="100%">
<tr>
<td align="center" height="100%" bgcolor="white">
Content of your email goes here, for widths try to use % procent from now if possible. Start again here with a table
<br />
For outlook you need v:rect code and fixed height set in pixels!<br /><br />
If you just want a block inside this 600px wrapper with a background you do it like this:<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;" height="300">
<tr>
<td align="center" height="300" background="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" bgcolor="#000000" style="color:#fefefe;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;">
<v:fill type="tile" src="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content goes here, for widths try to use % procent from now if possible. (except in v:rect code, use px there) For outlook you need v:rect code and fixed height set in pixels!<br><br>
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;<br>
<br /><br /><br />
<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
CSS background does not work everywhere for email. Use the HTML background property instead. E.g: <table background="image.jpg"...
Here is an example of the code that i have been using for quiet sometime now.
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width:600px;">
<tr>
<td align="center" height="400" background="[IMAGE PATH]" bgcolor="#000000" style="height:400px;color:#fefefe; background-image: url('[IMAGE PATH]'); background: url('[IMAGE PATH]');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="[IMAGE PATH]" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content here<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Above example is of a hybrid code. I have added two more background image paths in the style tag for the TD which should cater for Lotus notes (or older email clients) and for Gmail.
Let me know how you go.
Although the background images, we apply, may show at maximum no of email clients, but specifically not at the Outlook. So in order to show the email background at Outlook You can use the Code snippet given below, which will make the bg image visible at Outlook. Just select the Td at which you want the background image, then paste the below code there and update the background image path. <td background="your_background_image_path_here"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 600px; height: 100%;" src="your_background_image_path_here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 600px; height: 297px;"> <v:fill opacity="0%" color="#333333" /> <v:textbox inset="0,0,0,0"> <![endif]--> <table> Rest Your Emailer Code Goes Here </table> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td>
Top align in prime faces DataGrid
I create page and use data Grid there:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:link rel="stylesheet" type="text/css" href="mystyle.css"></h:link>
<title>Prototype</title>
</h:head>
<h:body>
<h3>Dashboard prototype</h3>
<h:form>
<p:dataGrid id = "grid"
value="#{dashboardView.users}"
var="user"
columns="#{dashboardView.columns}"
styleClass="gridClass">
<p:column styleClass="gridClass">
<p:panel header="#{user.user.displayName}"
styleClass="gridClass">
<p:dataGrid value="#{user.issues}"
var="issue"
columns="1">
<p:panel header="#{issue.key}">
"#{issue.summary}"
</p:panel>
</p:dataGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:commandButton value="rrr"
actionListener="#{dashboardView.button}"
update="grid">
</p:commandButton>
</h:form>
</h:body>
</html>
And CSS:
.gridClass {
vertical-align: top;
text-align: start;
}
Panels inside First DataGrid alligns on center, but I want it to allign on top.
How can I do it?
Thanks!
You can solve by using jquery selector, which is shown below.
<script>
$(document).ready(function() {
$(".panelOnTopClass").parent().css("vertical-align", "top");
$(".panelOnTopClass").parent().css("height", "300px");
});
</script>
<h:form id="form">
<p:dataGrid var="car" value="#{dataGridView.cars}" columns="3"
rows="12" paginator="true" id="cars"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16"
styleClass="gridClass">
<f:facet name="header">
Cars for Sale
</f:facet>
<p:panel header="#{car.id}" styleClass="panelOnTopClass">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage name="demo/images/car/#{car.brand}.gif"/>
<h:outputText value="#{car.year}" />
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Display Footer on Bottom
I want to design a Layout and the footer should alway been display on the bottom on the page how can I set this with CSS. Here is the application now http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml. I use jsf 2.2 and primefaces 4.0 Here is the code <f:view> <f:metadata> <ui:insert name="metadata" /> </f:metadata> <h:outputStylesheet library="css" name="template.css" /> <p:layout fullPage="true"> <p:layoutUnit styleClass="ui-widget-header" position="north" size="110"> <p:layout height="140"> <p:layoutUnit position="west" width="180" height="140"> <p:graphicImage library="images" name="Logo_0.3.png" height="90" width="170" /> </p:layoutUnit> <p:layoutUnit position="center"> <ui:insert name="header"> <ui:include src="/META-INF/templates/templateMenubar.xhtml" /> </ui:insert> </p:layoutUnit> </p:layout> </p:layoutUnit> <p:layoutUnit styleClass="content" position="center"> <h1> <ui:insert name="title"> <h:outputText value="Default Title" /> </ui:insert> </h1> <ui:insert name="content"> <ui:include src="/META-INF/templates/templateContent.xhtml" /> </ui:insert> </p:layoutUnit> <p:layoutUnit styleClass="ui-widget-header" position="south" size="60"> <p:layout styleClass="footerpic" height="100"> <p:layoutUnit position="center"> </p:layoutUnit> <p:layoutUnit styleClass="footerpic" position="east" width="300" height="80"> <h:graphicImage styleClass="footerpic" library="images" name="MFMNeu.png" height="25" width="25" /> </p:layoutUnit> </p:layout> </p:layoutUnit> </p:layout> </f:view>
Add CSS properties position:absolute; bottom:0px; to your footer.
In my case, I also had to add to the body section height: 100%
My css looks like:
html {
height: 100%
}
body {
height: 100%
}
.my_footer {
position: absolute;
bottom: 0 px;
}
h:dataTable loses selected row styleClass after submit
In my dataTable when a row is clicked it gets marked with some color. But then this mark disappears because submit occurs. But i re-render only some other part of the page and not the table, so why does it occur? How can i fix this?
The code:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/templates/mainLayout.xhtml">
<ui:define name="header">
<h1>Persons List</h1>
</ui:define>
<ui:define name="content">
<h:form id="mainForm">
<h:outputStylesheet name="tableStyle.css" library="css" target="body"/>
<h:panelGroup id="personPanel">
<h:outputText value="#{msgs.fName}"/>
<h:inputText value="#{personController.person.firstName}" maxlength="20"/>
<h:outputText value="#{msgs.lName}"/>
<h:inputText value="#{personController.person.lastName}" maxlength="20"/>
<h:outputText value="#{msgs.phone}"/>
<h:inputText value="#{personController.person.phone}" maxlength="20"/>
</h:panelGroup>
<h:commandButton value="#{msgs.save}" >
<f:ajax execute="#form" render="personsTable personPanel" listener="#{personController.savePerson}"/>
</h:commandButton>
<h:dataTable id="personsTable" value="#{personController.persons}" var="bean"
styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" >
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:commandLink value="#{bean.firstName}" >
<f:ajax execute="#this" render="personPanel" >
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:commandLink value="#{bean.lastName}" >
<f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:commandLink value="#{bean.phone}" >
<!-- f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax-->
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
<ui:define name="footer">
<script type="text/javascript">
$(document).ready(function(){
$(".order-table tr").mouseover(function(){
$(this).addClass("over");
});
$(".order-table tr").mouseout(function(){
$(this).removeClass("over");
});
$(".order-table tr").click(function(){
$(".order-table tr").removeClass("choose");
$(this).addClass("choose");
});
});
</script>
</ui:define>
</ui:composition>
You can use firefox and "firebug" plugin to inspect the element in real time to find out what's going on. It could be that something about your update is breaking the inheritance of the style...