jQuery UI Widgets Forums Layouts Splitter The horizontal splitter doesn't change its size when window changes its size

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

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

  • VG
    Member

    Hello,
    I’m trying to make flexible layout what means that the size of panels should change itself when I change the window’s size. The vertical splitter works pretty will but the horizontal splitter doesn’t want to change its size and I don’t know why.
    Here is the html and code:

    Top
    left Panel
    center Panel

    dd

    bottom panel

    code:

    $('#mainSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: "horizontal", theme: theme,
    panels: [
    { size: '10%', collapsible: true, collapsed: false, resizable: true },
    { size: '80%' },
    { size: '10%', max: 70}]
    });

    $('#centerSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', theme: theme,
    panels: [
    { size: '15%' },
    { size: '70%' },
    { size: '15%'}]
    });

    The max height for the bottom panel is set up as 70 but it could be of any size if I change the window vertically. Only if I change the window horizontally (even for 1 pixel) it starts working properly.


    VG
    Member

    Hmmm it doesn’t understand that I used the HTML and I can’t edit my post so let me try to put the html layout again:

        <div id="mainSplitter" style="height: 100%">
    <div>top</div>
    <div id="centerSplitter">
    <div>
    left Panel</div>
    <div>
    center Panel
    </div>
    <div>
    right
    </div>
    </div>
    <div>
    bottom panel
    </div>
    </div>

    Peter Stoev
    Keymaster

    Hi VG,

    Thanks for the valuable feedback! I have tested your scenario and I confirm the reported issue. I also created a work item about the issue.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    VG
    Member

    Hello Peter!
    Thanks for the response. Does it mean that we will have the fix in the near future?


    Peter Stoev
    Keymaster

    Yes. Changing the vertical size of the browser’s window will affect the Splitter’s layout when the splitter’s size is set in percentages. That fix will be available in the next release.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Namrata
    Member

    Hello Peter!
    Can you let me know when will be your next release regarding jqsplitter


    Peter Stoev
    Keymaster

    Hi Namrata,

    The latest version is already up. This topic is regarding a previous version. If you have an issue, please post your code here and we’ll try to reproduce it locally.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Namrata
    Member

    Hello Peter,

    I have also the same issue when i set the splitter’s size in percentages it is not fixed with my browser layout.

    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘10%’ }, { size: ‘90%’}] });
    $(‘#rightSplitter’).jqxSplitter({ width: ‘90%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 400, collapsible: false }, { size: 100}] });

    left Panel

    • This reply was modified 11 years, 9 months ago by  Namrata.
    • This reply was modified 11 years, 9 months ago by  Namrata.
    • This reply was modified 11 years, 9 months ago by  Namrata.

    Namrata
    Member

    I can’t edit my post so let me try to put the html layout again:

    <div id='mainSplitter'>
    <div>left panel</div>
    <div id='rightSplitter'>
    <div>top</div>
    <div>bottom</div>
    </div>
    </div>

    Peter Stoev
    Keymaster

    Hi Namrata,

    I have prepared a sample with jQWidgets 2.3.1 and here’s the full code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates 4 columns splitter" />
    <title id='Description'>This page demonstrates 4 columns 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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%'}] });
    $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
    });
    </script>
    <style type="text/css">
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="mainSplitter">
    <div>
    Left Panel</div>
    <div id="rightSplitter">
    <div>
    Top-Right Panel</div>
    <div>
    Bottom-Right Panel</div>
    </div>
    </div>
    </body>
    </html>

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.