Resize browser window resize splitter layout ?

5 posts, 0 answers
  1. n
    n avatar
    3 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Sep 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. n
    n avatar
    3 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    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>
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 Sep 2011 Link to this post

    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!
  6. n
    n avatar
    3 posts
    Member since:
    Sep 2011

    Posted 15 Sep 2011 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready