jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Splitter › Dynamic resize?

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 13 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Dynamic resize? Posts
  • February 24, 2012 at 3:53 pm Dynamic resize? #2427

    RichardD
    Member

    Hi!

    I just downloaded the latest version of the Splitter and it seems that the panels are resizing themselves when I resize my browser window? Is it a new function?

    I also notice that when I expand my browser window, the splitter bar move to the right. I have 2 panels : the first one is a menu and the 2nd panel is the content area. When I resize the browser window, the splitter move right which increase the width of the menu panel and the content panel width stay contant.

    Is there a way to make it the other way around : the splitter won’t move, the menu panel won’t expand but the extra space will go to the second panel only?

    Thanks in advance!!

    February 24, 2012 at 4:41 pm Dynamic resize? #2429

    Peter Stoev
    Keymaster

    Hi RichardD,

    You can restrict the auto-resize by setting the min and max of the splitter panels.

    For example:

    <!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'>This demonstration shows how to trigger the jqxSplitter events.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.1.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 = getTheme();
                $('#mainSplitter').jqxSplitter({ height: 480, theme: theme, panels: [{ size: 300, min: 100 }, { size: 400, min: 300}] });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="mainSplitter" style="max-width: 800px; min-width: 800px;">
                <div class="splitter-panel"><span>Left</span></div>
                <div class="splitter-panel"><div>Right</div></div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.