tabstrip with 100% height

[Dörig Adrian]

hi

i would like to have the content divs of the tabstripe with 100% height.
how do i do that?

this does not work:

<div id="tabstrip" style="height:100%">
            <ul>
                <li class="k-state-active">
                    First Tab
                </li>
                <li>
                    Second Tab
                </li>
            </ul>
            <div style="height:100%">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
            </div>
            <div style="height:100%">
                <p>Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.</p>
            </div>
        </div>

thanks
adrian

[Dimo]

Hello Adrian,

There are two important things to know when building layouts based on percentage heights.

1. Elements with percentage height require their parent to have an explicit height style set. Do you have one for the TabStrip parent?

2. The TabStrip has two visible sibling child elements - the tabs wrapper <ul> and the active tab <div>. As a result, you can't set 100% height for the <div>s, because there will be no room for the <ul>. You want a layout in which an element takes up "the rest of the available space" (which is different from 100% height), but this is considered desktop-like and current HTML/CSS standards do not support it. What you can do is calculate the appropriate height for the content <div>s after initializing the TabStrip and set it manually.

All the best,
Dimo
the Telerik team

[Denis Vuyka]

Hello Dimo,
Could you please give any simple sample towards calculation of the space after initializing TabStrip?
Thanks,
Denis

[Dimo]

Hi Denis,

Client-side size calculations and setting are implemented quite easily with the following jQuery methods:

outerHeight()
outerWidth()
height()
width()

Your final statement should be

$( tabStripWrapperElement ).children( ".t-content" ).height( calculatedHeight );

calculatedHeight is the outer height of the TabStrip minus the outer height of ul.t-tabstrip-items

Let me know if there is anything unclear.

All the best,
Dimo
the Telerik team

[Denis Vuyka]

Hi Dimo,

Thanks for the suggestion. With slight modifications your code worked perfect for me.

Regards,
Denis

[Jonathan]

While this is an old post, I'd suggest to any new developer having this problem to look into display:flex as a possible solution.

By injecting this style in the tabstrip control (via css), it's possible to automatically account for the tabstrip items.