Jon Barron
Top achievements
Rank 1
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!
Please help!
7 Answers, 1 is accepted
0
Steven
Top achievements
Rank 1
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:
and the corresponding code:
I would like not to have to be forced in to managing the resize if possible.
Anyone?
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
Hi guys,
To accomplish this you could use the following CSS:
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.
Regards,
Alexander Valchev
the Telerik team
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
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?
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
Hi Steven,
This is possible, to achieve it I suggest modifying the styles in this way:
I hope this helps.
Regards,
Alexander Valchev
the Telerik team
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
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
Any ideas how we just get the css:
.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
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
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
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.