jQuery UI Widgets Forums Layouts Splitter Splitter in 100% div does not function correctly

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 10 months ago.

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

  • arudmik
    Member

    I have created this test case to illustrate the problem of using a splitter inside a div that adjusts to use the remaining space. This test case raises multiple issues: 1) the splitter assumes a very large width with the div containing jqx-splitter-panel-wrapper set to width: 158332px; 2) the splitter height is also too high, 3) note the placement of the content for the second panel. Please advise.

    Vertical Splitter

    $(document).ready(function () {
    var theme = ”;
    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: theme, panels: [{ size: ‘40%’ }, { size: ‘60%’}] });
    });

    html {
    height:100%;
    width: 100%;
    }
    body {
    height:100%;
    width: 100%;
    }
    #container {
    height:100%;
    width: 100%;
    }
    #header {
    width: 100%;
    height: 44px;
    background-color: #333;
    }
    #leftTabs {
    height: 100%;
    width: 44px;
    background-color: #333;
    }
    #rightPanel {
    height:100%;
    width: 100%;
    }
    #rightPanelContainer {
    height:100%;
    }
    #splitterContainer {
    height:100%;
    width: 100%;
    }

     

    Panel 1
    Panel 2


    arudmik
    Member

    I will send you the code via email


    Peter Stoev
    Keymaster

    We are unable to reproduce the issue with the provided information. Please send us a small sample which will illustrate the problem, so we will be able to test and debug with the specific application scenario.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Peter Stoev
    Keymaster

    Thank you about the Splitter’s sample and for the feedback.

    Here’s the sample’s code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>Vertical Splitter</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', theme: theme, panels: [{ size: '40%' }, { size: '60%'}] });
    });
    </script>
    <style type="text/css">
    html {
    height:100%;
    width: 100%;
    }
    body {
    height:100%;
    width: 100%;
    }
    #container {
    height:100%;
    width: 100%;
    }
    #header {
    width: 100%;
    height: 44px;
    background-color: #333;
    }
    #leftTabs {
    height: 100%;
    width: 44px;
    background-color: #333;
    }
    #rightPanel {
    height:100%;
    width: 100%;
    }
    #rightPanelContainer {
    height:100%;
    }
    #splitterContainer {
    height:100%;
    width: 100%;
    }
    </style>
    </head>
    <body class='default'>
    <table id="container" cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr>
    <td id="leftTabs" width="44px"><img src="../../images/progress1.jpg" width="47" height="20"></td>
    </tr>
    </table>
    </td>
    <td id="rightPanel">
    <table id="rightPanelContainer" cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td id="header">&nbsp;</td>
    </tr>
    <tr>
    <td id="splitterContainer">
    <div id="mainSplitter">
    <div class="splitter-panel"> Panel 1</div>
    <div class="splitter-panel"> Panel 2</div>
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>

    I was able to reproduce the reported issue and created a new work item about it.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.