TabStrip width for VerticalLeft limited to 150px

2 posts, 0 answers
  1. Tom
    Tom avatar
    17 posts
    Member since:
    Jan 2009

    Posted 19 Jan 2009 Link to this post

    (I was asking this question in a thread in the ASP.Net TabStrip forum, but thought I should move it here...)

    I'm using the AJAX-Enabled ASP.NET RadTabStrip in a vertical left orientation, and the width is limited to 150px.  I tried applying a style recommended in the other forum (see the head tag in the code below) but the width still maxes out at 150px.

    My test page is very simple:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="RadTabStrip Width Test.aspx.vb" Inherits="AJAXEnabledWebApplication1.RadTabStrip_Width_Test" %> 
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     
    <!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>Untitled Page</title> 
        <style type="text/css">  
            .RadTabStripLeft .rtsLevel,  
            .RadTabStripRight .rtsLevel,  
            .RadTabStripLeft .rtsLevel .rtsUL,  
            .RadTabStripRight .rtsLevel .rtsUL  
            {  
                  width: 100% !important;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div style="width: 500px">  
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100%" Orientation="VerticalLeft">  
                    <Tabs> 
                        <telerik:RadTab runat="server" Text="First tab">  
                        </telerik:RadTab> 
                        <telerik:RadTab runat="server" Text="This is a very very long tab name">  
                        </telerik:RadTab> 
                    </Tabs> 
                </telerik:RadTabStrip> 
            </div> 
        </form> 
    </body> 
    </html> 
     

    Any tips to get this working?  When I examine the generated page I see that rtsUL has its width set to 150px.

    Thanks,
    Tom

  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 20 Jan 2009 Link to this post

    Hey Tom,

    You'll want to try something like this:

    .RadTabStripLeft_Default .rtsLevel .rtsUL,  
    .RadTabStripRight_Default .rtsLevel .rtsUL  
    {  
            width: 100% !important;   

    Buuuuut...  This makes the tab sized based on the length of content, which means you'll end up with tabs that are like this:

    ------------------  
    -  Tab 1         -  
    ------------------------------  
    - Super Long Tab Two Here    -  
    ------------------------------  
     

    But if you set a specific pixel length (width: 250px !important), you get tabs that are all the same width.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top