100% Window Height Splitter

13 posts, 1 answers
  1. Richard
    Richard avatar
    7 posts
    Member since:
    Sep 2011

    Posted 12 Sep 2011 Link to this post

    What's the best way to get a 100% window height splitter?

    Having tried unsuccessfully with pure CSS I managed to get it working with what feels like a bit of a hack:

    $("#splitter").height($(window).height() - 2);

    i.e. setting the splitter div to the window height using javascript. I also had to subtract 2 pixels for what I assume is CSS border or padding on the Kendo UI styles.

    Any input welcome.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Sep 2011 Link to this post

    Hello Richard,

    The best way to proceed in your case is to set

    <div id="splitter" style="height: 100%; border: 0;">

    You must take into account that elements with a percentage height require their parent to have explicit height too. In other words, if the Splitter is the topmost element inside the <body>, then the <body> and the <html> elements must have a 100% height applied.

    No Javascript will be required.

    Kind regards,
    Dimo
    the Telerik team
    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
  4. Richard
    Richard avatar
    7 posts
    Member since:
    Sep 2011

    Posted 19 Sep 2011 Link to this post

    Thanks for your reply.

    Do you have an HTML/CSS example of this to hand?

    While I can get some success in IE, Firefox isn't having it and simply shows a blank screen.

    Regards,

    Richard
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Sep 2011 Link to this post

    Hi Richard,

    The information in my previous reply was a little misleading. The Splitter will expand to 100% height, but will not resize on subsequent window resizes. The autosizing functionaliry has been implemented after the initial Kendo beta release.

    The demo below will work as expected. I have also attached a newer Kendo build, which does not require any additional Javascript apart from the widget initalization.


    <!DOCTYPE html>
     
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Kendo</title>
    <style>
     
    html,
    body
    {
        height:100%;
        margin:0;
        padding:0;
    }
     
    html
    {
        overflow:hidden;
    }
     
    </style>
    </head>
    <body>
     
    <div id="splitter" style="height:100%;border:0;">
        <div>
            top pane
        </div>
        <div>
            bottom pane
        </div>
    </div>
     
    <script>
     
    function triggerResize() {
        $("#splitter").data("kendoSplitter").trigger("resize");
    }
     
    $(document).ready(function() {
        $("#splitter").kendoSplitter({
            orientation: "vertical"
        });
     
        $(window).resize(triggerResize);
     
    });
     
    </script>
     
    </body>
    </html>


    Kind regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Richard
    Richard avatar
    7 posts
    Member since:
    Sep 2011

    Posted 20 Sep 2011 Link to this post

    Thanks Dimo,

    After your example didn't work first off, I realised that I also had to set the height of the form to 100% as the splitter is running within a ASP.Net page. Working fine now.

    Regards,

    Richard
  7. Rob
    Rob avatar
    5 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    This is great and works a treat, many thanks.
  8. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2014 in reply to Dimo Link to this post

    Thanks Dimo - works a treat.
  9. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2014 in reply to Dimo Link to this post

    Thanks Dimo ;-)
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Apr 2014 Link to this post

    Hi all,

    You are welcome. Please note that the resizing mechanism and responsiveness of all Kendo UI widgets has been improved and unified for Q1 2013 and the information in this forum thread is outdated. Manual resize triggering is now done with the resize() method. Using trigger("resize") with new Splitter versions will not lead to any result.

    http://docs.telerik.com/kendo-ui/getting-started/changes-and-backward-compatibility#kendo-ui-2013-q3

    http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#resizing-a-splitter-manually

    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!
     
  11. Doug
    Doug avatar
    2 posts
    Member since:
    Apr 2014

    Posted 08 Aug 2014 in reply to Dimo Link to this post

    Hello Dimo,

    I'm using kendo splitter with boostrap 2.3 with a top nav. If I follow your indication, the splitter has full height, which is great. The issue is as soon as I move the handle, it sticks to top the top of the page, behind the nav. 

    Could you possibly help?

    Doug
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Aug 2014 Link to this post

    Hi Doug,

    I am not sure I understood well what is your scenario and layout.

    If the Splitter has siblings, it cannot be 100% high and you will need to take care of calculating and setting its height initially and on every browser window resize. Then, call the Splitter's resize() method (please refer to the links in my previous reply).

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Doug
    Doug avatar
    2 posts
    Member since:
    Apr 2014

    Posted 08 Aug 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for your quick answer. Having height at 100% wasn't practical. I ended up doing:

    <div id="splitter" style="border: 0;">
    $(document).ready(function() {
        s= $("#splitter").kendoSplitter({
            orientation: "horizontal",
            resize: function(e){
                var h = $("#splitter").find(".k-pane")[0].scrollHeight;
                $('.k-pane').height(h);
                $('.k-splitbar').height(h);
            },
            panes: [ { scrollable: false }, {} ]
        }).data('kendoSplitter');
    });

    Which does the trick. Your comments are welcome.

    Kind Regards,

    Doug
  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Aug 2014 Link to this post

    Hello Doug,

    Resizing Splitter panes manually is not recommended. If you need to make manual adjustments, then resize the Splitter itself and call its resize() method, as our documentation suggests:

    http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#resizing-a-splitter-manually

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready