tabs using full browser height

5 posts, 1 answers
  1. John
    John avatar
    15 posts
    Member since:
    Aug 2015

    Posted 20 Aug 2015 Link to this post

    We are evaluating Kendo UI for a large application that will be an editing tool that takes up the entire browser window. I've been playing with tabs, accordions, and splitters for quite a few hours, and can't seem to come up with the mechanics to have a layout take up the fully available browser height and behave well when the browser is resized. Here's what I've come up with:

    http://codepen.io/vrmerlin/pen/JdQoNe

    For some reason, no matter what CSS I try, the components all compact into the top half of the screen. I was hoping for the kind of full-screen experience that you get with, say, Codepen, where you have distinct regions that take up the whole browser window, each with their own scrollbars. Is this possible with Kendo?

     

    Thanks,
    John

     

  2. John
    John avatar
    15 posts
    Member since:
    Aug 2015

    Posted 20 Aug 2015 in reply to John Link to this post

    I've made some progress on this:

     

    http://codepen.io/vrmerlin/pen/JdQoNe

    This behaves much better, until I select the second tab, then re-select the first tab. That tab is now collapsed down to a narrow strip. How do I handle the event selection properly?

     

     

     ​

  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Aug 2015 Link to this post

    Hi John,

    You need to use fade animation for the TabStrip, instead of expand animation, which overrides the tab containers' height-related styles that you have set.

    Here is a related demo:

    http://docs.telerik.com/kendo-ui/web/tabstrip/how-to/expand-height

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. John
    John avatar
    15 posts
    Member since:
    Aug 2015

    Posted 21 Aug 2015 in reply to Dimo Link to this post

     

    Thanks for the reply. I played around quiet a bit with the code in the link you provided, and am running into a significant issue. I DID get my example to work by using your code, and renaming my one tabstrip to "#tabstrip". Unfortunately, for my actual application, I'll need nested tabs. I attempted to implement that, and the nested tab had the same resizing problem.   Your example code (http://dojo.telerik.com/UmorI) appears to require that the tabstrip id be "tabstrip". If you replace it with something else (say "#my_tabs"), then it doesn't work:

    http://codepen.io/vrmerlin/pen/EjBGQR 

     

    I wanted to use that resizing code behavior on two different tabs (two different IDs), so both resize properly. Something like this:

     

    var fix_tabs = function(tab) {
        var tabStripElement = $("#" + tab).kendoTabStrip({
            animation: {
                open: {
                    effects: "fade"
                }
            }
        });
     
        tabStripElement.parent().attr("id", "tabstrip_parent");
        tabStripElement.data("kendoTabStrip");
     
        return tabStripElement;
     
    };
     
    var expandContentDivs = function (divs) {
        divs.height(divs.parent().innerHeight() - divs.parent().children(".k-tabstrip-items").outerHeight() - 16);
        // 16px are subtracted to compensate for content div vertical paddings and borders
        // This amount can be calculated instead of hard-coded, if needed.
    };
     
    var tabstrip1 = fix_tabs("my_tabs");
    var tabstrip2 = fix_tabs("data_sets");
     
     
    var resizeAll = function () {
        expandContentDivs(tabstrip1.children(".k-content"));
        expandContentDivs(tabstrip2.children(".k-content"));
    };
     
        resizeAll();
     
        $(window).resize(function () {
            resizeAll();
        });
        

    But it doesn't work. Am I close to a solution?

     

  6. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 24 Aug 2015 Link to this post

    Hello John,

    The following line in our example must be modified when changing the TabStrip ID:

    tabStripElement.parent().attr("id", "tabstrip-parent");

    Generally, you don't have to set an ID on the TabStrip parent. You can use the same custom CSS class for all TabStrip wrapper parents.

    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