jQWidgets Forums

Tagged: Splitter Tabs layout resize

This topic contains 8 replies, has 4 voices, and was last updated by Nadezhda 10 years, 7 months ago.

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

Author

Nested Splitter inside Tabs Posts
June 17, 2012 at 11:03 am Nested Splitter inside Tabs #4993

maximus
Member

I tried combining examples from your demos (2.2) to create a layout where
1. Two tabs on the outside (100% width and height of browser window)
2. One of the tabs has nested splits with panels for west,north,east,south,center
3. The panels should be resizing gracefully with browser window resizing

Please advise what is going wrong here ?

Thanks a lot

The Resulting screen shot is :
: https://docs.google.com/drawings/d/1oH5duPIZe1tFuoYh4_ZqAGC603ORwmy4fU7s4_HgnHQ/edit

1
2
3
4
5
6
7
8
9
10
11
12 $(document).ready(function () {
13 var theme = ”;
14 $(“#tabs”).jqxTabs({ theme: theme, height: ‘100%’, width: ‘100%’ });
15
16 $(‘#container’).jqxSplitter({ theme: theme, width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 12 0 }, { size: 450}] });
17 $(‘#nested’).jqxSplitter({ theme: theme, orientation: ‘vertical’, panels: [{ size: ‘300px’}, { size: ‘300px’, collapsed: false }, {size: ‘300px’} ] });
18
19 });
20
21
22
23 html, body
24 {
25 height: 100%;
26 width: 100%;
27 margin: 0px;
28 padding: 0px;
29 overflow: hidden;
30 }
31
32
33
34

35
36 Tab 1
37 Tab 2
38
39
40

41 Tab1 Stuff
42

43
44

45

46 North
47

48

49

50 West
51

52

53 Center
54

55

56 East
57

58

59

60 South
61

62

63

64
65

June 17, 2012 at 11:32 am 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.
June 17, 2012 at 3:04 pm Nested Splitter inside Tabs #4996

maximus
Member

this is a screenshot of the bug.

June 17, 2012 at 3:34 pm Nested Splitter inside Tabs #4998

Peter Stoev
Keymaster

Hi maximus,

It is not possible to have nested splitters inside jqxTabs. We’ll do our best to support such scenarios in the future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 18, 2012 at 11:37 pm 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 19, 2012 at 6:48 am Nested Splitter inside Tabs #5095

Peter Stoev
Keymaster

Hi maximus,

The jqxTabs and jqxSplitter widgets have a function called ‘refresh’ which performs a new layout when it is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

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

maximus
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

November 12, 2014 at 1:00 pm Nested Splitter inside Tabs #62578

SSS
Participant

Hi, There

Is there any way to have a nested Splitters inside the tab..

I have drawn the tab in Paint attaching it below….

Is it Possible Now in 3.5 !!

November 13, 2014 at 6:46 am Nested Splitter inside Tabs #62648

Nadezhda
Participant

Duplicate post: http://www.jqwidgets.com/community/topic/how-to-have-nested-splitters-inside-the-tab/#post-62647.
Author

Posts

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

You must be logged in to reply to this topic.