jQuery UI Widgets Forums Layouts Splitter Three panel splitter to 100% width

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Three panel splitter to 100% width #5164

    zircon
    Participant

    Is there any way of creating a three panel splitter with the middle panel the one that expands horizontally when the page is stretched ?

    Three panel splitter to 100% width #5193

    Peter Stoev
    Keymaster

    Hi zircon,

    Below is an example of Splitter initialization with 3 panels. The panel sizes grow and shrink when the page size is changed. However, this continues until the user manually changes the panels size by dragging a split bar.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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>
    <style type="text/css">
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '25%' }, { size: '50%' }, { size: '25%'}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id="mainSplitter">
    <div>
    Column 1</div>
    <div>
    Column 2</div>
    <div>
    Column 3</div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.