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
  • Panel content not showing #30432

    mullai.b
    Participant
    Panel content not showing #30433

    mullai.b
    Participant

    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>
    Panel content not showing #30435

    mullai.b
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.