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:
The other approach we have tried is to directly modify the CSS class of the selected tab:
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.
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; }.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
0
Hello Alan,
Please try using repaint() method on OnclientTabSelecting and repaint the RadTabStrip so that the width of the tab is updated. Here is a sample client-side code that you may use:
Regards,
Kate
the Telerik team
Please try using repaint() method on OnclientTabSelecting and repaint the RadTabStrip so that the width of the tab is updated. Here is a sample client-side code that you may use:
<script type="text/javascript"> function repaintTabStrip(sender, args) { var tabstrip = $find("<%=RadTabStrip1.ClientID%>"); tabstrip.repaint(); }</script>Regards,
Kate
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Alan
Top achievements
Rank 1
Rank 1
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:
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.
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.
0
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:
Best wishes,
Kate
the Telerik team
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.
0
R
Top achievements
Rank 1
Rank 1
answered on 03 Nov 2011, 10:39 PM
Is there a C# version of the
sender.repaint();
sender._scroller.repaint();
I have a radtabstrip within a radpane, and my last tab wraps to the next line when I set scrollchildren to true. I can't figure out how to fix this.
Thanks.0
R
Top achievements
Rank 1
Rank 1
answered on 03 Nov 2011, 10:40 PM
Is there a C# code behind version of the
sender.repaint();
sender._scroller.repaint();
?
I have a radtabstrip within a radpane, and my last tab wraps to the next line when I set scrollchildren to true. I can't figure out how to fix this.
Thanks.0
Hello R,
There isn't any C# involved. What repaint does is basically redraw the control with the current data in mind.
As for the tab breaking, there is a known such bug (in FireFox) that has been addressed in the Beta release of the RadControls.
Is that the bug you are referring to [happening in FF only]?
Best wishes,
Ivan Zhekov
the Telerik team
There isn't any C# involved. What repaint does is basically redraw the control with the current data in mind.
As for the tab breaking, there is a known such bug (in FireFox) that has been addressed in the Beta release of the RadControls.
Is that the bug you are referring to [happening in FF only]?
Best wishes,
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
0
R
Top achievements
Rank 1
Rank 1
answered on 07 Nov 2011, 04:52 PM
Hi Ivan,
No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.
Thanks.
No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.
Thanks.
<telerik:RadPane ID="RadPane_PreviewSrvy" runat="server" MaxWidth="900" Width="900px"> <telerik:RadTabStrip ID="RadTabStrip_SecGrp" runat="server" OnTabClick="RadTabStrip_SecGrp_TabClick" Width="880px" ScrollChildren="true" ScrollButtonsPosition="Middle"> </telerik:RadTabStrip>0
R
Top achievements
Rank 1
Rank 1
answered on 07 Nov 2011, 04:53 PM
Hi Ivan,
No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.
Thanks.
No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.
Thanks.
<telerik:RadPane ID="RadPane_PreviewSrvy" runat="server" MaxWidth="900" Width="900px"> <telerik:RadTabStrip ID="RadTabStrip_SecGrp" runat="server" OnTabClick="RadTabStrip_SecGrp_TabClick" Width="880px" ScrollChildren="true" ScrollButtonsPosition="Middle"> </telerik:RadTabStrip>0
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
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
0
R
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2011, 09:46 PM
How do I set the width of the containing UL from code behind? The count of my tabs varies so I cannot do this in the stylesheet.
Thanks.
Thanks.
0
R
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2011, 04:56 PM
Thanks! This worked.
0
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:
Regards,
Ivan Zhekov
the Telerik team
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
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
0
Phil
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2013, 07:08 PM
I had similar issue and I resolved changing the skin from Office2007 to another one but office
I hope this helps
I hope this helps
0
Hessel
Top achievements
Rank 1
Rank 1
answered on 05 Dec 2013, 01:06 PM
Hi Ivan,
I'm experiencing the same issue. By editing the css in real-time (F12) and adding/changing the width I can see the correct repaint. Can you please give me a javascript snippet that I can insert on the page that needs the RadTabstrip resized, as you suggested? Thanx in advance.
Best regards,
Hessel
I'm experiencing the same issue. By editing the css in real-time (F12) and adding/changing the width I can see the correct repaint. Can you please give me a javascript snippet that I can insert on the page that needs the RadTabstrip resized, as you suggested? Thanx in advance.
Best regards,
Hessel
0
Hi, all.
The behaviour described by Hessel is a confirm and valid bug and we've logged it in our Ideas and Feedback portal. You can follow the development of the story here -- http://feedback.telerik.com/Project/108/Feedback/Details/88051-radtabstrip-justified-alignment-and-last-item-issue.
Regards,
Ivan Zhekov
Telerik
The behaviour described by Hessel is a confirm and valid bug and we've logged it in our Ideas and Feedback portal. You can follow the development of the story here -- http://feedback.telerik.com/Project/108/Feedback/Details/88051-radtabstrip-justified-alignment-and-last-item-issue.
Regards,
Ivan Zhekov
Telerik
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 the blog feed now.