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

tabs using full browser height

4 Answers 85 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 20 Aug 2015, 03:33 PM

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

 

4 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 20 Aug 2015, 09:10 PM

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?

 

 

 ‚Äč

0
Dimo
Telerik team
answered on 21 Aug 2015, 02:51 PM
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!
 
0
John
Top achievements
Rank 1
answered on 21 Aug 2015, 09:13 PM

 

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?

 

0
Accepted
Dimo
Telerik team
answered on 24 Aug 2015, 11:36 AM
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!
Tags
TabStrip
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or