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
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
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
Thank you for the update. If you have any further questions, regarding this matter, please feel free to contact me.
My bad, I've changed to TailCSSClass and it's working.
Thanks, Karthik
I assume that you need to use the TailCssClass property instead of TextCssClass in order to manipulate on the WebTab header. If you need more assistance, please feel free to contact me.