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

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

7 Answers 2379 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jon Barron
Top achievements
Rank 1
Jon Barron asked on 15 Jun 2012, 12:03 AM
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!

7 Answers, 1 is accepted

Sort by
0
Steven
Top achievements
Rank 1
answered on 10 Jul 2012, 05:51 AM
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?

0
Alexander Valchev
Telerik team
answered on 12 Jul 2012, 01:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steven
Top achievements
Rank 1
answered on 12 Jul 2012, 01:12 PM
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?
0
Alexander Valchev
Telerik team
answered on 17 Jul 2012, 02:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gary
Top achievements
Rank 1
answered on 03 Dec 2012, 07:46 PM
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 ??
0
Dimo
Telerik team
answered on 05 Dec 2012, 08:05 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Will
Top achievements
Rank 1
answered on 15 Jan 2016, 10:23 PM

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.

Tags
TabStrip
Asked by
Jon Barron
Top achievements
Rank 1
Answers by
Steven
Top achievements
Rank 1
Alexander Valchev
Telerik team
Gary
Top achievements
Rank 1
Dimo
Telerik team
Will
Top achievements
Rank 1
Share this question
or