jQuery UI Widgets Forums Layouts Splitter Multiple splitters in tabs?

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Multiple splitters in tabs? #4856

    ChrisJ
    Member

    I have a set of tabs, each which require a splitter. The splitter seems to work fine in the first tab, but the second one doesn’t seem to render correctly, and when it is resized, the one in the first tab dissappears.

    The following code shows the issue.

    $(document).ready(function () {
    var theme = getTheme();

    $('#jqxTabs').jqxTabs({position:'top', height:"100%", theme:theme, selectionTracker:true, animationType:'fade' });

    $('#Splitter1').jqxSplitter({height:'200px', theme:theme, enableCollapseAnimation:true, roundedcorners:true, panels:[
    { size:"25%", min:300, max:"40%" },
    { size:"75%"}
    ] });

    $('#Splitter2').jqxSplitter({height:'200px', theme:theme, enableCollapseAnimation:true, roundedcorners:true, panels:[
    { size:"25%", min:300, max:"40%" },
    { size:"75%"}
    ] });
    })

    Tab 1
    Tab 2

    Chris

    Multiple splitters in tabs? #4861

    Peter Stoev
    Keymaster

    Hi Chris,

    This code will initialize jqxTabs with 2 Spltters. Also make sure that you use jQWidgets 2.2 and the latest version of the jQuery framework.

    <!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>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    $("#tabs").jqxTabs({ theme: theme, height: '100%', width: 400, selectionTracker: true });
    $('#splitter').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });
    $('#splitter2').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });
    });
    </script>
    <style type="text/css">
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body class='default'>
    <div id="tabs">
    <ul>
    <li style="margin-left: 30px;">Tab 1</li>
    <li>Tab 2</li>
    </ul>
    <div id="splitter">
    <div class="splitter-panel">
    Content 1.1
    </div>
    <div class="splitter-panel">
    Content 1.2
    </div>
    </div>
    <div id="splitter2">
    <div class="splitter-panel">
    Content 2.1
    </div>
    <div class="splitter-panel">
    Content 2.2
    </div>
    </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.