Splitter

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

    Posted 18 Jul 2016 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
    1660 posts

    Posted 20 Jul 2016 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.
     
Back to Top