Splitter to display on whole window

2 posts, 0 answers
  1. Rocio
    Rocio avatar
    28 posts
    Member since:
    Dec 2015

    Posted 18 Jul Link to this post

    Thank you in advance for any feedback!

    I am trying to have one left pane and two middle pane split on the middle.  So one vertical left splitter and one horizontal splitter.

    So far this is the code that I have, it does the split ok but it doesn't show in the whole page.

     

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <meta charset="utf-8" />

        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

        <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

    </head>
    <body>
        <div id="example">
            <div id="vertical" style="height: 100%; width: 100%" >
                <!--<div id="top-pane">-->
                    <div id="horizontal" style="height: 100%; width: 100%;">
                        <div id="left-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / left pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                        <div id="center-pane">
                            <div class="vertical">
                                <div id="center-top">
                                    <div class="pane-content">
                                        <h3>Inner splitter1 / center pane</h3>
                                        <p>Resizable only. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                                                            </p>
                                    </div>
                                </div>
                                <div id="center-bottom">
                                    <div class="pane-content">
                                        <h3>Inner splitter2 / center pane</h3>
                                        <p>Resizable only.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!--</div>-->
                </div>
            </div>

            <script>
                    $(document).ready(function() {
                        $(".vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                { collapsible: false, size: "80%" },
                                { collapsible: false, size: "20%" }
                            ]
                        });

                        $("#vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                { collapsible: false, size: "100%" },
                            ]
                        });

                        $("#horizontal").kendoSplitter({
                            panes: [
                                { collapsible: false, size: "400px" },
                                { collapsible: false },
                                { collapsible: true}
                            ]
                        });
                    });
            </script>

            <style>
                #vertical {
                    height: 100%;
                    margin: 0 auto;
                }

                #middle-pane {
                    background-color: rgba(60, 70, 80, 0.10);
                }

                #bottom-pane {
                    background-color: rgba(60, 70, 80, 0.15);
                }

                #left-pane, #center-pane, #right-pane {
                    background-color: rgba(60, 70, 80, 0.05);
                }

                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>
    </body>

    </html>

  2. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 20 Jul Link to this post

    Hi Rocio,

    In order to make a Splitter (and any block html element as a whole) occupy 100% of its container height, you will need to make sure that the height of all Splitter's parents also is set in percentages (up to a parent with a fixed height). Adding the following CSS style to your page should allow all elements to be sized int he desired way:
    #example, html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding:0;
        overflow: hidden;
    }


    You can test a live sample demonstrating the same here: http://dojo.telerik.com/@veselinar/egeYe

    Regards,
    Vessy
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top