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

Tab Height

1 Answer 269 Views

TabStrip

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

Brete asked on 03 Jun 2016, 08:03 PM

tabheight.png

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

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.