jQuery UI Widgets Forums Layouts Splitter Dynamic resize?

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Dynamic resize? #2427



    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!!

    Dynamic resize? #2429

    Peter Stoev

    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">
    <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.
    <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}] });
    <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>

    Best Regards,
    Peter Stoev

    jQWidgets Team

    • This reply was modified 11 years, 1 month ago by  Peter Stoev.
    • This reply was modified 9 years, 4 months ago by  Peter Stoev.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.