Expand the TabStrip to 100% Height and Auto-Resize
Environment
| Product | Progress® Kendo UI® TabStrip for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I applt a 100-percent height to the Kendo UI for jQuery TabStrip and auto-resize the control?
Solution
When making the TabStrip 100% high, keep in mind that web standards require elements with percentage height to have a parent element with an explicit height. This rule applies recursively until either an element with a pixel height, or the <html> element, is reached. 100% high elements cannot have borders, paddings, margins, or visible siblings.
The milestones of the approach are:
- Make the TabStrip
<div>and its auto-generated parent<div>100% high - Disable TabStrip animations or use a
fadeanimation. The defaultexpandanimation is not going to work. - Calculate the height of the TabStrip content containers based on the height of the widget
<div>.
The example below demonstrates how to make the TabStrip widget 100% high and resize together with the browser window.
<style>
html,
body,
#tabstrip-parent,
#tabstrip {
height: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
</style>
<div id="tabstrip">
<ul>
<li class="k-active">Item 1</li>
<li>Item 2</li>
</ul>
<div>
Content 1
<p><button type="button" class="k-button" id="appendButton">Append Item</button></p>
</div>
<div>
Content 2
</div>
</div>
<script>
var resizeAll = function() {
expandContentDivs(tabStripElement.children(".k-content"));
}
var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fade"
}
}
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
var expandContentDivs = function(divs) {
var visibleDiv = divs.filter(":visible");
divs.height(tabStripElement.innerHeight()
- tabStripElement.children(".k-tabstrip-items").outerHeight()
- parseFloat(visibleDiv.css("padding-top"))
- parseFloat(visibleDiv.css("padding-bottom"))
- parseFloat(visibleDiv.css("border-top-width"))
- parseFloat(visibleDiv.css("border-bottom-width"))
- parseFloat(visibleDiv.css("margin-bottom")));
// all of the above padding/margin/border calculations can be replaced by a single hard-coded number for improved performance
}
resizeAll();
$(window).resize(function(){
resizeAll();
});
$("#appendButton").kendoButton({
click:function(){
tabStrip.append({
text: "Item N",
content: "Appended Item Content"
});
resizeAll();
}
})
</script>