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

tabstrip with 100% height

5 Answers 973 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Dörig Adrian
Top achievements
Rank 1
Dörig Adrian asked on 23 Jan 2012, 04:24 PM
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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Jan 2012, 05:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Denis Vuyka
Top achievements
Rank 1
answered on 17 Mar 2012, 09:59 PM
Hello Dimo,
Could you please give any simple sample towards calculation of the space after initializing TabStrip?
Thanks,
Denis
0
Dimo
Telerik team
answered on 19 Mar 2012, 09:11 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Denis Vuyka
Top achievements
Rank 1
answered on 19 Mar 2012, 05:03 PM
Hi Dimo,

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

Regards,
Denis
0
Jonathan
Top achievements
Rank 1
answered on 19 Jun 2015, 04:31 PM

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.

Tags
TabStrip
Asked by
Dörig Adrian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Denis Vuyka
Top achievements
Rank 1
Jonathan
Top achievements
Rank 1
Share this question
or