jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Splitter › Splitter issue inside tabs

Tagged: , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Splitter issue inside tabs Posts
  • August 14, 2013 at 8:29 am Splitter issue inside tabs #26790

    rskbuvan
    Spectator

    Hi,

    I’ve 3 tabs in my application, where each tab has jqxSplitter (i.e. Left side has Grid & Right side has its respective details, which will open upon onclick on grid rows) and it is in collapsed state by default.

    Without expanding any of the splitter, I’m navigation to each tab. When I’m coming back to any of the tab, the collapsed splitter has got expanded by default.

    For Example:
    1) I’m visiting Tab 1 and Tab 2 – without expanding the splitter.
    2) Now I’m coming back to Tab 1, now the collapsed splitter has got expanded.

    Note: Each splitter has unique ID

    Can anyone suggest me, what could be the possible cause and how to prevent this?

    Hope I explained it clearly here.

    Looking for a solution.

    Thanks & Cheers,
    \_rssb

    August 15, 2013 at 4:41 am Splitter issue inside tabs #26861

    Peter Stoev
    Keymaster

    Hi rskbuvan,

    Please, provide a sample web page which demonstrates your scenario.

    The following is a sample with Tabs and Splitter. There are 2 Splitter instances within 2 tabs.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.bootstrap.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.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" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "bootstrap";
                $("#tabs").jqxTabs({ theme: theme, height: '100%', width: '100%',
                    initTabContent: function (tab) {
                        if (tab == 0) {
                            $('#splitter').jqxSplitter({ height: '100%', width: '100%', theme: theme, panels: [{ size: '50%'}] });
                        }
                        else {
                            $('#splitter2').jqxSplitter({ orientation: 'horizontal', height: '100%', width: '100%', theme: theme, panels: [{ size: '50%'}] });
                        }
                    }
                });
            });
        </script>
        <style>
            html, body {
                width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0;
            }
        </style>
    </head>
    <body class='default'>
        <div id="tabs">
            <ul>
                <li style="margin-left: 30px;">Tab 1</li>
                <li>Tab 2</li>
            </ul>
            <div class="jqx-hidescrollbars">
                <div class="jqx-hideborder" id="splitter">
                    <div>
                        Content 1.1
                    </div>
                    <div>
                        Content 1.2
                    </div>
                </div>
            </div>
            <div class="jqx-hidescrollbars">
                <div class="jqx-hideborder" id="splitter2">
                    <div>
                        Content 2.1
                    </div>
                    <div>
                        Content 2.2
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Also make sure that you use the current version – 2.9.3.

    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.