Setting the height of a tab item to stretch vertically.

3 posts, 0 answers
  1. dsxhan
    dsxhan avatar
    1 posts
    Member since:
    Nov 2009

    Posted 14 Jan 2012 Link to this post

    I'm having trouble getting tab items to stretch vertically based on the height of the parent tabstrip. What is happening is my items div ends up going past the tabstrip div. I cant help but think there is something going on behind the scenes that I'm missing.

    Thanks

    I have the following layout:

    HTML:

    <div id="tabstrip">
        <ul>
            <li class="k-state-active">First Tab </li>
            <li>Second Tab </li>
        </ul>
        <div class="workspace">
            <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 class="workspace">
            <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>

    CSS:

    #tabstrip
    {
        position: absolute;
        top: 40px;
        bottom: 0px;
    }

    .workspace
    {
        height: 100%;
    }
  2. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 17 Jan 2012 Link to this post

    I am also trying to accomplish this. Any help?
  3. Kendo UI is VS 2017 Ready
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 18 Jan 2012 Link to this post

    Hello Gary and Dave,

    Try using this CSS:
    #tabstrip
    {
        position: absolute;
        top: 40px;
        bottom: 10px;
        padding: .3em;
    }
    #tabstrip .k-tabstrip-items
    {
        position: absolute;
        top: -37px;
    }
    .k-tabstrip-items li
    {
        background-color: #eee;
    }
    .workspace,
    #tabstrip .k-content
    {
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .workspace
    {
        height: 100% !important;
    }


    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top