full window layout

7 posts, 1 answers
  1. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 16 Dec 2011 Link to this post

    In RAD ASP controls there was a demo for full-browser window layout using Rad Splitter and panels etc. The nice thing about that demo was while resizing the browser, it allowed to automatically resize all panels within it.

    We need similar type of feature in Kendo UI - how do we achieve that? For example,  I need such feature using TabStrip so that the Tab Panel resizes according to the browser size and other items like menu and call remain fix size.
  2.
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 19 Dec 2011 Link to this post

    Hi Piyush,

    Please inspect the following example:

    http://jsfiddle.net/dimodi/QZcH7/

    In short, you need to make calculations and resize the TabStrip content wrappers manually on window resize, and on initial load. This is because the TabStrip widget consist of two sibling elements (the tabs wrapper and the content wrappers) and currently supported web standards do not allow script-less resizing in such a scenario.

    Best wishes,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 19 Dec 2011 Link to this post

    Thanks for pointing me to this example. I am using Chrome Browser. and kpane.innerHeight() is returning NULL. following function is copied from the site suggested above (http://jsfiddle.net/dimodi/QZcH7/). function resizeTabs() {
    var paneHeight = $("#tabStrip").closest(".k-pane").innerHeight();
    var kpane = $("#tabStrip").closest(".k-pane");
    alert(kpane); alert(kpane.innerHeight());
    var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
    $("#tabStrip > div").height(paneHeight - tabsHeight - 18);
    }
  7. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 19 Dec 2011 Link to this post

    Hi Piyush,

    My demo works as expected in Chrome, so please compare the code with your implementation to see what's wrong.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 19 Dec 2011 Link to this post

    Dimo,

    Thank you for your great support. I figured this out. I am not wrapping the tabs within splitter - that was the issue. 

    Corrected the javascript to not use '.k-pane' and now it works. 

    For benefit of otheres -- 

    $(window).resize(function() {
    resizeTabs();
    });


    function resizeTabs() {
       var parentHeight = $("#tabStrip").innerHeight();
       var tabTop = $("#tabStrip").position().top;
    var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
    //alert(parentHeight);
    $("#tabStrip > div").height(parentHeight - tabsHeight - 18 - tabTop);
        }

    Thanks,
    Piyush Bhatt
  11. Eric
    Eric avatar
    12 posts
    Member since:
    Aug 2010

    Posted 08 May 2012 Link to this post

    Dimo,

    On your example solution, it appears that the resize event is happening before the window actually gets resized.  So, the value of the $("#tabstrip").closest(".k-pane").innerHeight() is actually the value BEFORE the resize occurs.

    Try moving the top horizontal splitter a large amount, then a small amount, and then a large amount again.  You will notice the resizes are stale (one move previous).

    Do you have a way to get resize events AFTER the user resize has been performed?

    Thanks
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 May 2012 Link to this post

    Hello Eric,

    The layoutChange event is what you are looking for.

    All the best,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top