Splitter

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. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 20 Jul Link to this post

    Hello Rocio,

    I see that the div#example element has no height, therefore, the #vertical element cannot inherit the body's height.  Also, body and html element are not decorted with 100% height in order for the splitter to take the entire page. Here you are an article on the topic: http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height.

    And here you are a Dojo with the splitter setup you sent:  http://dojo.telerik.com/ADoBE.

    Regards,
    Ianko
    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