Tab Height

2 posts, 0 answers
  1. Brete
    Brete avatar
    33 posts
    Member since:
    Feb 2008

    Posted 03 Jun Link to this post

    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. 

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    141 posts

    Posted 08 Jun Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top