jQWidgets Forums

Forum Replies Created

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

Author

Posts

June 20, 2012 at 11:14 am in reply to: Nested Splitter inside Tabs Nested Splitter inside Tabs #5141

Member

Peter
I did some more testing with nested splitter as the first tab — You are right – even though it appears to work at first glance.
When I load content into those panels – the splitter stops functioning totally.

I will have to wait for the next version for this feature – Let us know when we can expect this – if it is in the roadmap

Thanks

June 18, 2012 at 11:37 pm in reply to: Nested Splitter inside Tabs Nested Splitter inside Tabs #5075

maximus

Member

Hello Peter
Thanks for your response. I suspected this might be the case. However …
I played with this some more .. Here is what I am finding :

a. It does work if the nested splitter is on the first tab – ( the default landing tab in general I suspect).
b. If it is on the second tab – it also works if you just resize the browser window

This leads me to believe – the 2.2 code is almost there –>
So the natural question becomes :
Is there a way for me to tell the Tab panel to re-layout itself – each time the Tab is clicked ?
This will be a work around for now ( in the application code – to call this method on a tab click event)

Regards
maximus

June 17, 2012 at 3:04 pm in reply to: Nested Splitter inside Tabs Nested Splitter inside Tabs #4996

maximus

Member

this is a screenshot of the bug.

June 17, 2012 at 11:32 am in reply to: Nested Splitter inside Tabs Nested Splitter inside Tabs #4994

maximus

Member

Here is the formatted code

<!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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            $("#tabs").jqxTabs({ theme: theme, height: '100%', width: '100%' });
            $('#container').jqxSplitter({ theme: theme, width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: 120 }, { size: 450}] });
            $('#nested').jqxSplitter({ theme: theme, orientation: 'vertical', panels: [{ size: '300px'},  { size: '300px', collapsed: false }, {size: '300px'} ] });
        });
    </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='tab1'>
             Tab1 Stuff
        </div>
        <div id="container">
            <div class="splitter-panel">
                North
            </div>
            <div class="splitter-panel" id="nested">
                <div class="splitter-panel">
                    West
                </div>
                <div class="splitter-panel" id="secondNested">
                    Center
                </div>
                <div class="splitter-panel">
                    East
                </div>
            </div>
            <div class="splitter-panel" id="thirdNested">
                South
            </div>
        </div>
    </div>
</body>
</html>

The problem is that the Center Panel should not be collapsed – and it is not easy to “open” it up.

Author

Posts

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