Increase the width of TabContainer header

Question

I have a vertical TabContainer, but I can't fix the width of the TabPanel (it will increase a little, but not to the full width of the text). Text is hidden behind the ContentTemplate. For example:

Here's the markup:

  <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Visible="false"  UseVerticalStripPlacement="true">
       <asp:TabPanel ID="TabPanel2" runat="server" >
             <HeaderTemplate>
                   <div style="width: 200px">General Examination </div>
             </HeaderTemplate>
             <ContentTemplate>  </ContentTemplate>
        </asp:TabPanel>

How can I fix the width of the tabs to that they are all same? The second tab, "General Examination", is not fully visible.

Answer 1

You need to add some CSS for the tab headers. The style that applies to that element of the AJAX Control Toolkit TabContainer is named .ajax__tab_header_verticalleft. Something like this should work:

.ajax__tab_header_verticalleft 
{
    width: 200px;
}

You might be able to dial back a bit from 200px, but that should work for you.