Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Resize browser window resize splitter layout ?

4 Answers 511 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
n
Top achievements
Rank 1
n asked on 13 Sep 2011, 02:37 PM
the-css-file.jpg
my-css-file.png
Im trying to get a splitter layout to refresh and resize when I resize the browser window.

Im have manged to get the layout to stretch 100 % both width wise and height so the only thing I cant work out is what to do inside my jqeury "$(window).resize(function() " so that the hole splitter layout to refresh and resize ???

Best Regards
Nicklas

01.<!doctype html>
02.<html>
03.    <head>
04.        <title>Basic usage</title>
05.        <link href="_includes/css/base.css" rel="stylesheet"/>
06.        <link href="_includes/css/kendo.common.min.css" rel="stylesheet"/>
07.        <link href="_includes/css/kendo.kendo.min.css" rel="stylesheet"/>
08.        <script src="_includes/js/jquery.1.6.2.min.js"></script>
09.        <script src="_includes/js/kendo.all.min.js"></script>
10.    </head>
11.    <body>
12.        <div id="splitter" >
13.            <div id="vertical">
14.                <div id="top">
15.                    <p>
16.                        Outer splitter : top pane
17.                    </p>
18.                </div>
19.                <div>
20.                    <div id="horizontal">
21.                        <div id="left">
22.                            <p>
23.                                Inner splitter :: left pane
24.                            </p>
25.                        </div>
26.                        <div id="center">
27.                            <p>
28.                                Inner splitter :: center pane
29.                            </p>
30.                        </div>
31.                        <div id="right">
32.                            <p>
33.                                Inner splitter :: right pane
34.                            </p>
35.                        </div>
36.                    </div>
37.                </div>
38.                <div id="bottom">
39.                    <p>
40.                        Outer splitter : bottom pane
41.                    </p>
42.                </div>
43.            </div>
44. 
45.            <script type="text/javascript">
46.                $(document).ready(function()
47.                {
48.                   $("#splitter #vertical").height($(window).height() - 2)
49.                 
50.                   function onResize(e)
51.                   {
52.                       console.log("Resized :: Splitter #" + this.element[0].id);
53.                       console.log(this.element[0]);
54.                   };
55.                 
56.                   $("#vertical").kendoSplitter({
57.                        orientation: "vertical",
58.                        panes: [
59.                            { collapsible: true, size: "30%" }, // top height
60.                            { collapsible: false, size: "40%" },
61.                            { collapsible: true, size: "30%" } // bottom height
62.                        ],
63.                        resize: onResize
64.                    });
65. 
66.                    $("#horizontal").kendoSplitter({
67.                        panes: [
68.                            { collapsible: true, size: "20%" }, // left height
69.                            { collapsible: false, size: "60%"  }, // center
70.                            { collapsible: true, size: "20%" } // right height
71.                        ],
72.                        resize: onResize
73.                    });
74.                     
75.                    $(window).resize(function()
76.                    {
77.                        // what do i put here to force resize refresh of all splitters ???
78.                    });
79.                });
80.            </script>
81.        </div>
82.    </body>
83.</html>

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Sep 2011, 03:09 PM
Hi Nicklas,

Please refer to the forum thread started by (probably) a colleague of yours:

http://www.kendoui.com//forums/ui/splitter/100-window-height-splitter.aspx

The best option is to avoid setting pixel heights. In this way you will not have to change them on browser resize.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
n
Top achievements
Rank 1
answered on 13 Sep 2011, 03:29 PM
screenshot.png
It dosent work ?

Oki I modified my example a bit by cutting of the "fat" see the code bellow. I  tried setting 100% via css but it just dosent work "see attached  screenshot" when I resize browser (firefox 5.0) splitter layout is static both in width and height so any other suggestions are appreciated ?

<!doctype html>
<html>
    <head>
        <title>Basic usage</title>
        <link href="_includes/css/kendo.common.min.css" rel="stylesheet"/>
        <link href="_includes/css/kendo.kendo.min.css" rel="stylesheet"/>
        <script src="_includes/js/jquery.1.6.2.min.js"></script>
        <script src="_includes/js/kendo.all.min.js"></script>
        <style type="text/css">
            html, body
            {
                margin:0 0 0 0 !important;
                padding:0 0 0 0 !important;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
             
            #splitter
            {
                margin: 0 0 0 0;
                padding:  0 0 0 0;
                width: 100%;
                height: 100%;
            }
             
            #splitter #vertical
            {
                width: 100%;
                height: 100%;
            }
             
            #splitter #horizontal
            {
                width: 100%;
                height: 100%;
                border: 0;
                overflow:hidden;
            }               
        </style>
    </head>
    <body>
        <div id="splitter" >
            <div id="vertical">
                <div>
                    <p>
                        Outer splitter : top pane
                    </p>
                </div>
                <div>
                    <div id="horizontal">
                        <div>
                            <p>
                                Inner splitter :: left pane
                            </p>
                        </div>
                        <div>
                            <p>
                                Inner splitter :: center pane
                            </p>
                        </div>
                        <div>
                            <p>
                                Inner splitter :: right pane
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <p>
                        Outer splitter : bottom pane
                    </p>
                </div>
            </div>
 
            <script type="text/javascript">
                $(document).ready(function()
                {
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: true }, // top height
                            { collapsible: false },
                            { collapsible: true } // bottom height
                        ]
                    });
                     
                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true}, // left height
                            { collapsible: false  }, // center
                            { collapsible: true } // right height
                        ]
                    });
                });
            </script>
        </div>
    </body>
</html>
0
Dimo
Telerik team
answered on 14 Sep 2011, 09:24 AM
KendoUI-2011-2-826.zip
Hello Nicklas,

Actually, the discussed functionality has been implemented after the Kendo release. You can try using the scripts and styles from the attached build.

Alternatively, you can subscribe to window.resize and execute the following Javascript:

$("#vertical").data("kendoSplitter").trigger("resize")


Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
n
Top achievements
Rank 1
answered on 15 Sep 2011, 08:59 AM
A great now it works =)

Thnx "Dimo"

I put the code bellow in a $('window') on resize and then everything works great now when it comes to rezeing the bowser window =)
$("#vertical").data("kendoSplitter").trigger("resize")

Best Regards

Nicklas
Tags
Splitter
Asked by
n
Top achievements
Rank 1
Answers by
Dimo
Telerik team
n
Top achievements
Rank 1
Share this question
or