I have a tab strip (I need it to be in Lightweight mode) :
<telerik:RadTabStrip width="100%" Align="Center" Skin="Default"
Orientation="HorizontalTop" RenderMode="Lightweight"
Tabs are centered to the left
Any ideas?
1 Answer, 1 is accepted
Rank 1
Iron
Iron
Veteran
Seems if more than one strip present, both of them have to be 'Lightweight'.
Is it true?
<%@ Page Language="vb" AutoEventWireup="false"%>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml/">
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" AsyncPostBackTimeout="1000000"/>
<telerik:RadTabStrip width="100%" Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop" RenderMode="Lightweight">
<Tabs>
<telerik:RadTab Text="Tab 1"></telerik:RadTab>
<telerik:RadTab Text="Tab 2"></telerik:RadTab>
<telerik:RadTab Text="Tab 3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadTabStrip width="100%" Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop">
<Tabs>
<telerik:RadTab Text="Tab 1"></telerik:RadTab>
<telerik:RadTab Text="Tab 2"></telerik:RadTab>
<telerik:RadTab Text="Tab 3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
</form>
</body>
</html>
Yes, it is a prerequisite to have all Telerik UI for ASP.NET AJAX controls on the page with the same render mode, otherwise, you will fall into the case of mixed stylesheet rendering problems discussed in these articles:
- Telerik Controls Appearance Is Incorrect or Distorted - The page contains controls of mixed render modes. For example, a Button on the master page has RenderMode="Classic" and a Button on a user control has RenderMode="Lightweight". All controls of the same type and their child controls must have the same render mode.
- Determine the render mode of all Telerik controls and catch mixed render mode issues
Hi David,
I tested the reported scenario with the following tabstrip configuration
<telerik:RadTabStrip width="100%" Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop" RenderMode="Lightweight"> <Tabs> <telerik:RadTab Text="Tab 1"></telerik:RadTab> <telerik:RadTab Text="Tab 2"></telerik:RadTab> <telerik:RadTab Text="Tab 3"></telerik:RadTab> </Tabs> </telerik:RadTabStrip>and the result is
If this is the result you are expecting and looking for, please make sure that there isn't any CSS on the page that overrides this rendering. You can check the suggestions in this blog post: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools (See the Applied Styles).
If you need further assistance, please provide a fiddler jam capture and the aspx/codebehind/masterpage/css files for review and recreation of the problem. Thank you!