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

Tab Height

1 Answer 209 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Brete
Top achievements
Rank 1
Brete asked on 03 Jun 2016, 08:03 PM

What is the proper way to set/adjust the tab height when rendermode = 'Lightweight'?  

I am using the latest version (Q2 2016)

Changing the height value on the control does not seem to work.  Entering a number smaller than the default height cuts off the bottom of the tab, IE:  text remains same distance from top of tab. 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"  Skin="Black"  RenderMode="Lightweight" Height="25px"    SelectedIndex="4" >
        <Tabs>
            <telerik:RadTab runat="server" Text="Root RadTab1"  >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab2" >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab3"  >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab4" >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab5" Selected="True"  >
            </telerik:RadTab>
        </Tabs>
  </telerik:RadTabStrip>

Entering a number larger than the default is ignored.

 <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  Skin="Black"  RenderMode="Lightweight" Height="325px"    SelectedIndex="4" >
        <Tabs>
            <telerik:RadTab runat="server" Text="Root RadTab1"  >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab2" >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab3"  >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab4" >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab5" Selected="True"  >
            </telerik:RadTab>
        </Tabs>

  </telerik:RadTabStrip>

See attached image for examples. 

 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 08 Jun 2016, 11:48 AM
Hello,

You could control the height of the tabs by changing the line height of the RadTabStrip and setting the overflow property to visible. Here is a sample style rule and  the markup of the RadTabStrip: 

html body .RadTabStrip {
    line-height: 7;
    overflow: visible;
}
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Black" RenderMode="Lightweight" SelectedIndex="4">
    <Tabs>
        <telerik:RadTab runat="server" Text="Root RadTab1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab3">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab4">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab5" Selected="True">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
 
Here you could see a screenshot of the result.

Regards,
Peter Milchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
TabStrip
Asked by
Brete
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or