tabs using full browser height

[John]

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

 

[John]

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?

 

 

 ​

[Dimo]

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

 

 

[John]

 

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?

 

[Dimo]

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