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

Setting the height of a tab item to stretch vertically.

2 Answers 320 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
dsxhan
Top achievements
Rank 1
dsxhan asked on 14 Jan 2012, 10:17 PM
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 Answers, 1 is accepted

Sort by
0
Gary
Top achievements
Rank 2
answered on 17 Jan 2012, 07:52 PM
I am also trying to accomplish this. Any help?
0
Kamen Bundev
Telerik team
answered on 18 Jan 2012, 02:37 PM
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!
Tags
TabStrip
Asked by
dsxhan
Top achievements
Rank 1
Answers by
Gary
Top achievements
Rank 2
Kamen Bundev
Telerik team
Share this question
or