jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › Panel content not showing
This topic contains 2 replies, has 1 voice, and was last updated by mullai.b 11 years, 4 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Please find the code: Content in item2 is not shown in chrome.
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Responsive Pinterest-style Layout With CSS demo by Osvaldas Valutis</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo of Responsive Pinterest-style Layout With CSS" /> <meta name="robots" content="all"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.web.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js "></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxPanel var theme = getDemoTheme(); $("#jqxWidget").jqxPanel({ width: '100%', height: 300, theme: theme, autoUpdate: true }); $("#item1").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); $("#item2").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); $("#item3").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); }); </script> <style> #WWW_PNL_FloatingColumns { width: 100%; /*overflow: hidden;*/ margin-bottom: -1.875em; /* 30px */ -webkit-column-count: 3; -webkit-column-gap: 1.875em; /* 30px */ -webkit-column-fill: auto; -moz-column-count: 3;/* Safari and Chrome */ -moz-column-gap: 1.875em; /* 30px */ -moz-column-fill: auto; column-count: 3; /*column-gap: 1.875em; /* 30px */ column-fill: auto; } .WWW_PNL_FloatingColumns { /* background-color: #fff; background-color: rgba( 255, 255, 255, .5 );*/ margin-bottom: 1.875em; /* 30px */ -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } </style></head><body> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;"> <!--Content--> <div id="WWW_PNL_FloatingColumns"> <div id='item1' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> <div id='item2' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> <div id='item3' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> </div> </div></body></html>
Hi All,
Content in item1 is shown in chrome, IE.
But Content in
item2, Item3 [jqxPanel] is not shown in chrome.The below css is not recognized if the content is placed in jqxpanel.
-moz-column-count: 3;/* Safari and Chrome */
-moz-column-gap: 1.875em;
-moz-column-fill: auto;Please let me know how can i fix this issue.
Regards,
Mullai Malar -
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.