Multiple splitters in tabs? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Multiple splitters in tabs? Posts

June 12, 2012 at 5:16 pm 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

June 12, 2012 at 6:14 pm 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

Author

Posts

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

You must be logged in to reply to this topic.