tabstrip with 100% height

6 posts, 0 answers
  1. Dörig Adrian
    Dörig Adrian avatar
    3 posts
    Member since:
    Sep 2002

    Posted 23 Jan 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Denis Vuyka
    Denis Vuyka avatar
    39 posts
    Member since:
    Oct 2009

    Posted 17 Mar 2012 Link to this post

    Hello Dimo,
    Could you please give any simple sample towards calculation of the space after initializing TabStrip?
    Thanks,
    Denis
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Mar 2012 Link to this post

    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!
  6. Denis Vuyka
    Denis Vuyka avatar
    39 posts
    Member since:
    Oct 2009

    Posted 19 Mar 2012 Link to this post

    Hi Dimo,

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

    Regards,
    Denis
  7. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Feb 2014

    Posted 19 Jun 2015 Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready