Forcing TabStrip to take up 100% of it's parent container

[Jon Barron]

I'm trying to get the tabstrip inner container to take up 100% of the height & width of the parent div it's in. Nothing I've tried seems to accomplish this.

Please help!

[Steven]

Jon,

I am having a similar issue.   Anyone figure this out?

I have the following markup:

<div id="tabContainer" style="height: 500">

    <div id="tabDetail">

        <ul>

            <li class="k-state-active">Employee Management</li>

            <li>Transfer History</li>

            <li>Compensation</li>

            <li>Dashboard</li>

            <li>Reporting</li>

        </ul>

    </div>

</div>

and the corresponding code:

$("#tabDetail").kendoTabStrip( {

    contentUrls: [

        "html/Workforce/Page1.htm",

        "html/Workforce/Page2.htm",

        "html/Workforce/Page3.htm",

        "html/Workforce/Page4.htm",

        "html/Workforce/Page5.htm",

        "html/Workforce/Page6.htm"

    ]

});

I would like not to have to be forced in to managing the resize if possible.

Anyone?

[Alexander Valchev]

Hi guys,

To accomplish this you could use the following CSS:

#tabstrip { /* tabstrip element */
    height: 500px;
    position: relative;
}

.k-tabstrip .k-content {
    position: absolute;
    top: 41px;
    bottom: 0;
}

As an alternative approach, instead of setting the tab strip's element height, I would suggest setting the height of the content. Thus way the tab strip's parent container will automatically resize.

.k-tabstrip .k-content {
    height: 500px;
}

 

Regards,
Alexander Valchev
the Telerik team

[Steven]

Alexander,

Thanks for this reply.   I will check it out.   I was hoping there was a way to do it where it would size as the window is re-sized rather than hard coding the height or adjusting via JS.   Is that possible?

[Alexander Valchev]

Hi Steven,

This is possible, to achieve it I suggest modifying the styles in this way:

#tabstrip { /* tabstrip element */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}

.k-tabstrip .k-content {
    position: absolute;
    top: 41px;
    bottom: 0;
}

I hope this helps.

Regards,
Alexander Valchev
the Telerik team

[Gary]

Yes, this works but if you have a grid on the Tab that contains an embedded TabStrip in the detail Template as I have it tries to apply the .k-tabstrip .k-content settings to that as well, with bad consequences obviously.

Any ideas how we just get the css: 

.k-tabstrip .k-content {

    position: absolute;

    top: 41px;

    bottom: 0;

}    

To apply ONLY to the root #tabstrip ??

[Dimo]

Hello Gary,

Of course, you can use a child selector instead of a descendant selector, and use the root TabStrip ID instead of its CSS class.

Greetings,
Dimo
the Telerik team

[Will]

This approach does not seem to work well if the tab strip is wrapped to more than one row. The top of the content must be relative to the bottom of the tab strip. Fixed at 41px doesn't work.

 My guess is, that similar to the Kendo Grid 100% height, you have to capture the resize event and explicitly recalculate the top of the content.