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

Last Tab in RadTabStrip disappears

15 Answers 287 Views

Ajax

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

Alan asked on 21 Jul 2011, 12:17 PM

Hello,
In the web application we are developing using the latest version of RadControls for Ajax, we make use of RadSplitter and RadTabStrip. We would like to format the selected tab's text as bold so we have tried several approaches to accomplish it, one of them using the tab's SelectedCssClass:

tab.SelectedCssClass = "highlightedTab";

where

.highlightedTab

{

font-weight: bold !important;

}

The other approach we have tried is to directly modify the CSS class of the selected tab:

.RadTabStripTop_Office2007 .rtsSelected

{

font-weight: bold !important;

}

Both of these approaches produce the expected result but are also causing a problem: the last tab in the tabstrip ocassionally disappears. We have looked into the issue using Firebug and we noticed that the inner list of the tabstrip does not update its width when a tab caption is made bold (therefore the tab width increases) and it causes the last tab to be wrapped on the following row because there is not enough room left for it.
We have tried updating the list's width through client side code every time a tab is selected, but we couldn't get the tabstrip to work properly given that it also has the scroll buttons enabled.
Please advise us on how to fix this issue.
Thank you.

15 Answers, 1 is accepted

answered on 08 Aug 2011, 04:51 PM

Hello again and thank you for your reply.
I have tried your suggested approach and indeed it resizes the selected tab properly (I believe that happened even without using the repaint() method), but the width of the list of tabs is not updated when a tab is resized, therefore still causing the problem I mentioned above. As a note, the problem does not show in IE, but only in Firefox and Chrome.
I have managed to isolate the issue in a small test project:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestTabstrip._Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2011.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Test Project</title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<style id="Style1" type="text/css" runat="server">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

.paneContainer

{

position: relative;

}

.RadTabStripTop_Office2007 .rtsSelected

{

font-weight: bold !important;

}

</style>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">

</telerik:RadScriptManager>

<telerik:RadCodeBlock runat="server" ID="sb1">

<script type="text/javascript">

function TabSelecting(sender, eventArgs) {

tabStrip = $find('<%= TabStripMain.ClientID %>');

//alert("selected tab width before repaint: " + eventArgs.get_tab().get_element().offsetWidth + ' tabstrip width: ' + tabStrip.get_element().offsetWidth + ' inner list: ' + tabStrip.get_childListElement().offsetWidth);

tabStrip.repaint();

}

function TabSelected(sender, eventArgs) {

//alert("selected tab width after repaint: " + eventArgs.get_tab().get_element().offsetWidth + ' tabstrip width: ' + tabStrip.get_element().offsetWidth + ' inner list: ' + tabStrip.get_childListElement().offsetWidth);

}

</script>

</telerik:RadCodeBlock>

<div id="ParentDivElement" style="height: 100%;">

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"

Orientation="Horizontal" Skin="Office2007" VisibleDuringInit="false">

<telerik:RadPane ID="ToolbarPane" runat="server" Height="38px" Scrolling="none">

<telerik:RadToolBar ID="tbrTop" runat="server" Skin="Office2007" Width="100%" Style="overflow: visible;">

<Items>

<telerik:RadToolBarButton runat="server" Text="Button">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="Button">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton IsSeparator="true">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton Text="Button">

</telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="TopSplitBar" runat="server" CollapseMode="None">

</telerik:RadSplitBar>

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500" Width="100%">

<telerik:RadSplitter ID="MainPaneSplitter" runat="server" Skin="Office2007" LiveResize="false"

Width="100%">

<telerik:RadPane ID="TabStripPane" runat="server" Height="100%" Scrolling="None"

Width="100%" CssClass="paneContainer">

<telerik:RadTabStrip ID="TabStripMain" runat="server" Skin="Office2007"

SelectedIndex="0" ScrollChildren="true" ScrollButtonsPosition="Right" OnClientTabSelecting="TabSelecting"

OnClientTabSelected="TabSelected">

<Tabs>

<telerik:RadTab Text="Tab 1">

</telerik:RadTab>

<telerik:RadTab Text="Tab 2">

</telerik:RadTab>

<telerik:RadTab Text="Tab 3 Long Text">

</telerik:RadTab>

<telerik:RadTab Text="Tab 4">

</telerik:RadTab>

<telerik:RadTab Text="Tab 5 Long Text">

</telerik:RadTab>

<telerik:RadTab Text="Another Tab">

</telerik:RadTab>

<telerik:RadTab Text="Another Tab">

</telerik:RadTab>

<telerik:RadTab Text="Another Tab">

</telerik:RadTab>

<telerik:RadTab Text="Another Tab">

</telerik:RadTab>

<telerik:RadTab Text="Tab 6 User Can Edit Text">

</telerik:RadTab>

<telerik:RadTab Text="Tab 7 User Can Edit Text">

</telerik:RadTab>

<telerik:RadTab Text="Last Tab User Can Edit Text">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

On a screen resolution of 1366x768, the last tab wraps on the next row when Tab 3 or Tab 5 is clicked.
Any suggestions are welcome in order to stop this behaviour.
Thank you,
Alan.

answered on 12 Aug 2011, 12:36 PM

Hello Alan,

Thanks for clarifying.

To workaround this issue you can use the following code snippet and attach it to the OnClientTabSelected event of the RadTabStrip control:

<telerik:RadTabStrip ID="TabStripMain" runat="server" Skin="Office2007" SelectedIndex="0"

ScrollChildren="true" ScrollButtonsPosition="Right" OnClientTabSelected="TabSelected">

<telerik:RadCodeBlock runat="server" ID="sb1">

<script type="text/javascript">

function TabSelected(sender, eventArgs) {

sender.repaint();

sender._scroller.repaint();

if ($telerik.isIE9) {

var childList = sender.get_childListElement();

var childListWidth = parseInt(childList.style.width);

if (!isNaN(childListWidth))

childList.style.width = childListWidth + 2 + "px";

}

</script>

</telerik:RadCodeBlock>

Best wishes,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 10 Nov 2011, 01:38 PM

Hi R,

The root of this issue is the so called precision font rendering that comes with Windows7. What it does is to allow fonts to be rendered with a fraction of the pixel precision, which in terms makes containers with a fraction of the pixel wider.

The browser API's however are not in line with this. Hence breaking of the tabs. We tried to address this issue, by hard coding few extra pixels of width, but it doesn't work in all cases.

What you could do is to:

1) Set height to the TabStrip
2) Count the number of tabs and extend the width of the containing UL with that many pixels.

Until the browser API's provide is with a proper methods for getting the dimensions, that's the only solution so far.

Greetings,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 18 Nov 2011, 05:06 PM

Hi R,

To count the tabs:
1) from code behind you need TabStrip.Tabs.Count
2) from client code you need TabStrip.get_tabs()._array.length

Both assume that TabStrip is the object referencing the RadTabStrip.

On the other question, you can't easily set the height of the UL from code behind. You could do it with CSS. Note that each level of tabs sits in a related container e.g. rtsLevel1, rtsLevel2 and so on. So in order to address the root tabs you need a snippet like the following:

.RadTabStrip_SKIN_NAME .rtsLevel1 .rtsUL {

height: DESIRED_HEIGHT !important;

}

Regards,
Ivan Zhekov
the Telerik team