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

[Solved] TabStrip width for VerticalLeft limited to 150px

1 Answer 162 Views

TabStrip

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

Tom asked on 19 Jan 2009, 10:48 PM

(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

1 Answer, 1 is accepted

answered on 20 Jan 2009, 06:54 PM

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.