Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Karthik Mani
589
How to set the tab header width
posted

Hi,

I have three tabs in the WebTab control and the tab header (in other words ContentTabItem-> Text) width is based on the length of the header text.

How do I set a fixed width for all tab headers.

Regards, Karthik

Parents
  • 15320
    Offline posted

    Hello Karthik,

    Thank you for posting in Infragistics forum!

    I have tested this scenario and you can manipulate the WebTab ContentTabItem by getting reference to the TabCssClasses property of the control and set some custom css classes used by the tab item. In your case I suggest that you could use the “TailCssClass” property. You can simply try something similar to:

    <ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px">

    <Tabs>

                    <ig:ContentTabItem runat="server" Text="Tab 1">

                        <TabCssClasses TailCssClass="header" />

     </Tabs>

    </ig:WebTab>

    .....

    <style type="text/css">

            .header

            {

                width: 80px;

                }

        </style>

    If you need more assistance, please feel free to contact me.

     

    Sincerely,

    Tsanna Belcheva

    Developer Support Engineer

    Infragistics, Inc.

    http://es.infragistics.com/support

  • 589
    posted in reply to [Infragistics]Tsanna

    Hi,

     

    Thanks for the response.

     

    I've tried the same as suggested and the width isn't changing. Below is the ASPX page, Can you please let me know, whats wrong.

    <!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> <style type="text/css">         .TabHeaderCSS         {             width: 400px;             }     </style> </head>

    <body>     <form id="form1" runat="server">     <div>         </div>     <ig:WebTab ID="WebTab1" runat="server" Height="200px" SelectedIndex="1"         Width="300px">         <Tabs>             <ig:ContentTabItem runat="server" Text="Tab 1">                 <TabCssClasses TextCssClass="TabHeaderCSS" />             </ig:ContentTabItem>             <ig:ContentTabItem runat="server" Text="Tab 2">             </ig:ContentTabItem>         </Tabs>     </ig:WebTab>     <ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>     </form> </body> </html>

     

    Thanks, Karthik M

     

Reply Children