This is a migrated thread and some comments may be shown as answers.

Full Screen splitter window

1 Answer 389 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Nigel
Top achievements
Rank 1
Nigel asked on 24 Mar 2014, 10:23 AM
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>

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Mar 2014, 03:46 PM
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!
 
Tags
Splitter
Asked by
Nigel
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or