I have a RadTabStrip defined as follows:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
AutoPostBack="True" Skin="Silk" Height="40px" Align="Justify">
<Tabs>
<telerik:RadTab runat="server" Text="Tab Number 1" Value="T1" Font-Bold="True" Selected="True">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Tab Number 2" Value="T2" Font-Bold="True">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
When the web page is displayed and I shrink the window size by grabbing the right side of the browser window, then the last tab flickers as I resize and if I stop the mouse in just the right spot the last tab completely disappears.
If I change the ALIGN property from JUSTIFY to CENTER, the flickering disappears and the last tab remains displayed.
This behavior occurs on the latest version of Firefox and Chrome.
1 Answer, 1 is accepted
Hi Thomas,
Thank you for sharing the whole markup of the page, it turns out the table's percentage width is causing the incorrect calculation of the tab's width. That is because the jQuery's method $(element).width() returns a rounded-up value, while the actual width is a bit smaller. For example, an actual width of 99.5555px would be returned as 100.
To overcome this, you can place the following script somewhere after the ScriptManager, e.g. near the closing tag of the </form>
<script type="text/javascript">
if (Telerik && Telerik.Web.UI.RadTabStrip) {
Telerik.Web.UI.RadTabStrip._justifyListElement = function (childListElement, sizeProperty, setSize) {
var $T = Telerik.Web.UI;
var $ = $ || $telerik.$;
var $childListElement = $(childListElement),
sizeMethods = sizeProperty == "offsetWidth" ? { innerSize: "width", outerSize: "outerWidth" } : { innerSize: "height", outerSize: "outerHeight" },
targetSize,
tabGroups;
targetSize = $childListElement.parent()[sizeMethods.innerSize]() - ($childListElement[sizeMethods.outerSize]() - $childListElement[sizeMethods.innerSize]()) - 1;
if (targetSize <= 0) {
return;
}
tabGroups = $T.RadTabStrip._getTabGroups(childListElement, sizeProperty);
for (var tabGroupIndex = 0; tabGroupIndex < tabGroups.length; tabGroupIndex++) {
var currentGroup = tabGroups[tabGroupIndex];
if (currentGroup.size <= 0) {
continue;
}
var listItemRatios = [];
var i;
for (i = 0; i < currentGroup.length; i++)
listItemRatios[i] = currentGroup[i][sizeProperty] / currentGroup.size;
var accumulatedSize = 0;
for (i = 0; i < currentGroup.length - 1; i++) {
var size = Math.round(targetSize * listItemRatios[i]);
setSize(currentGroup[i], size);
accumulatedSize += size;
}
setSize(currentGroup[i], targetSize - accumulatedSize);
}
};
}
</script>Regards,
Peter Milchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Thomas,
I have tested the markup code you shared and it seems to work as expected. Here is a short video of my testing: http://somup.com/c3Q0QiUG5w
Perhaps, there are some other factors on the page that change the behavior/appearance.
Look for custom CSS or JavaScript errors.
I could help you investigate the issue, but for that, I would need the details that will help me replicate the problem.
Try to isolate the issue in a sample and share that with me. I will then test it to see why it happens.
Hello Attila,
Thank you for the quick response.
I created a C# Telerik web page project and here is the DEFAULT.ASPX. No other code was written for this example.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <!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></title> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div> <table style="width: 100%"> <tr> <td style="width: 20%"></td> <td style="width: 70%; text-align: right; vertical-align: top;"> <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" AutoPostBack="True" Skin="Silk" Height="40px" Align="Justify"> <Tabs> <telerik:RadTab runat="server" Text="Information Security" Value="IS" Font-Bold="True" Selected="True"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Data Protection" Value="DP" Font-Bold="True" > </telerik:RadTab> </Tabs> </telerik:RadTabStrip> </td> <td style="width: 10%; vertical-align: top;"> <br /> <br /> <br /> <br /> </td> </tr> </table> </div> </form> </body> </html>