Full Screen splitter window

2 posts, 0 answers
  1. Nigel
    Nigel avatar
    1 posts
    Member since:
    Mar 2014

    Posted 24 Mar 2014 Link to this post

    I'm trying to get a window that contains a (fixed size) top and bottom bar, and the central portion sizable with a splitter; with the whole thing scaled to fill the entire browse window.

    I'm using the below, which was based on reading of this: http://jsfiddle.net/j5edh/

    The resizing doesn't seem to work at all; the bottom bar disappears. I've tried may different variants and I don't seem to be getting anywhere fast. The bottom DIV seems to get resized to a height of 0px, as if it's trying to constrain the whole view to a fixed height.

    What am I doing wrong?



    --
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        
            <div id="example" class="k-content">        
                <div id="vertical">
                 <div id="title-pane">
                        <div class="pane-content">
                            <h3>Outer splitter / bottom pane</h3>
                            <p>Non-resizable and non-collapsible.</p>
                        </div>
                    </div>
                    <div id="middlePane">
                        <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="right-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / right pane</h3>
                                    <p>Resizable and collapsible.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <div id="bottom-pane">
                        <div class="pane-content">
                            <h3>Outer splitter / bottom pane</h3>
                            <p>Non-resizable and non-collapsible.</p>
                        </div>
                    </div>
                </div>


                <script>
                    $(document).ready(function() {
                        $("#vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                    { collapsible: false, resizable: false, size: "100px" },
                                    { collapsible: false, resizable: true },                   
                                { collapsible: false, resizable: false, size: "100px" }
                            ]
                        });


                        $("#horizontal").kendoSplitter({
                            panes: [
                                { collapsible: true, resizable:true, size: "220px" },
                                
                                { collapsible: true, resizable:true, size: "220px" }
                            ]
                        });
                        
                        
                        $(window).resize(function() {
                               resizeSplitter()
                           });


                           resizeSplitter = function() {
                               splitter = $("#vertical")
                                   .data("kendoSplitter")
                                   .size("#middlePane", $(window).height() - 200 + "px");
                               
                               kendo.resize($("#middlePane"));
                            
                           };


                        
                    });
                </script>


                <style scoped>
                  


                    #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. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 24 Mar 2014 Link to this post

    Hi Nigel,

    This jsFilddle demo is very old and uses an outdated Kendo UI version and a resizing method. Moreover, the resizing algorithm works the opposite way (from the inside to the outside, while it should normally work the other way), which brings up unnecessary complexity. The proper way to achieve the desired behavior is provided in our documentation. Since the Spltiter is a child of the page <body>, no additional event handlers or Javascript is required.


    http://docs.telerik.com/kendo-ui/getting-started/changes-and-backward-compatibility#changes-from-2013-q2-sp1-(2013.2.918)

    http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#make-the-splitter-expand-to-100%-height

    Regards,
    Dimo
    Telerik
     
    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
Back to Top