Article information
Article relates to	RadTabStrip v3.x "classic"  RadTabStrip for ASP.NET AJAX (Telerik.Web.UI 2008.1.x)
Created by	Paul, Telerik
Last modified	April 03, 2008
Last modified by	Paul, Telerik

HOW TO
Avoid wrapping of tabstrip items when resizing the browser below the tabstrip width.


SOLUTION
This KB shows how to force the tabstrip items to remain on a single line regardless of their number. If the length of the root group is larger than the width of the page, a scrollbar will be created to accommodate the desired behavior (no wrapping of the items).

Due to the changed rendering mechanism, the tabstrip does not stretch its container. However, there is an easy way to do this - call this script at the end of the page. The best place is just before the closing form tag:




SOLUTION
This KB shows how to force the tabstrip items to remain on a single line regardless of their number. If the length of the root group is larger than the width of the page, a scrollbar will be created to accommodate the desired behavior (no wrapping of the items).

Due to the changed rendering mechanism, the tabstrip does not stretch its container. However, there is an easy way to do this - call this script at the end of the page. The best place is just before the closing form tag:

<script type="text/javascript">

function nowrap (mytabstr)

{

var twidth=0;

var ul=mytabstr.ChildStripDomElement;

for (var i=0; i<ul.childNodes.length; i++)

{

var node=ul.childNodes[i];

if (node.nodeType==3)continue;

twidth+=node.offsetWidth;

}

ul.style.width=twidth+"px";

}

window.onload =  function ()

{

var mytabstr = <%=RadTabStrip1.ClientID%>;

nowrap(mytabstr);

}

</script>