jQuery UI Widgets Forums Layouts Panel and Responsive Panel main panel content disappears when resizing window

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 12 years ago.

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

  • maurizio
    Participant

    I have created a page that contains 3 panels separated by splitters and a jqxTree in the left panel. I have added some text to the main panel, but when I resize the browser window the text disappears to reappear again when the window is resized back to full screen. Does anybody have any idea why this happen? Please see code below to recreate issue

    Thanks – Maurizio

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="description" content="The jqxDockPanel widget represents a container for other widgets
    or elements. It arranges its inner elements depending on the value of the 'dock' attribute." />
    <title id='Description'>Test System</title>
    <link rel="tomcat icon" href="images/tomcat.gif" type="image/x-icon" />
    <!--link href="css/Blue.css" rel="stylesheet" type="text/css"-->
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = 'ui-redmond'; //'ui-redmond darkblue';
    // Create jqxTrees
    $('#formsTree').jqxTree({
    theme: theme,
    enableHover: true,
    keyboardNavigation: true,
    toggleMode: 'click'
    });
    // Create jqxExpanders
    $('#formsExpander').jqxExpander({
    showArrow: true,
    expanded: true,
    toggleMode: 'click',
    width: 'auto',
    height: 'auto',
    theme: theme
    });
    // create nested panels and splitters
    $('#mainSplitter').jqxSplitter({
    theme: theme,
    orientation: 'horizontal',
    width: '100%',
    height: '100%',
    splitBarSize: '0px',
    panels: [{
    size: '14%',
    collapsible: false,
    resizable: false
    }, {
    size: '86%',
    collapsible: false
    }]
    });
    $('#firstNested').jqxSplitter({
    theme: theme,
    orientation: 'vertical',
    height: '100%',
    panels: [{
    size: '15%',
    collapsible: true
    }]
    });
    });
    </script>
    <style type="text/css">
    html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }
    </style>
    </head>
    <body style="background-image: url(); background-repeat: repeat-x; background-color: #CBE2F1;" >
    <div id="mainSplitter">
    <div id="header" style="background-image: url(Images/header.png); no-repeat; height: 100%; width: 100%;">
    <h1 style="margin-left: 5px;">Test System</h1>
    </div>
    <div class="splitter-panel" id="firstNested">
    <div class="splitter-panel" style="background-image: url(); background-repeat: repeat-x; background-color: #CBE2F1; overflow-x: auto; overflow-y: auto;">
    <div id='formsExpander'>
    <div>Entry Forms</div>
    <div id='formsTree'>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='jqwidgets/images/entryForm.png' /><span item-title="true" onclick="$('#main').load('entryForm.php')">Account</span>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="splitter-panel" id="main" style="margin-left: 10px; overflow-x: auto; overflow-y: auto;">
    some stuff here
    </div>
    </div>
    </div>
    </body>
    </html>

    maurizio
    Participant

    Peter Stoev
    Keymaster

    Hi maurizio,

    We are aware of the issue regarding the jqxSplitter. In the next version, we will do our best to resolve the splitter’s issue.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.