New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Orientation and Alignment

TabStrip representing different types of orientation.

  • Corporate
  • Products
  • Services
corporate
products
services

TabStrip representing different types of alignment.

  • Products
  • Services
  • Corporate
  • Telerik UI for ASP.NET
  • Telerik UI for WinForms
  • Telerik Reporting
  • Sitefinity CMS
  • Demo Configurator
Orientation options


Alignment Options



You can customize the way tabs are rendered by setting the Orientation property of RadTabStrip. Accepted values are:

HorizontalTop:
RadTabStrip is above the content (e.g. RadMultiPage). Child tabs (if any) are shown below parent tabs.
HorizontalBottom
RadTabStrip is below the content (e.g. RadMultiPage). Child tabs (if any) are shown above parent tabs.
VerticalRight:
RadTabStrip is on the right side of the content (e.g. RadMultiPage). Child tabs (if any) are shown on the left side of parent tabs.
VerticalLeft:
RadTabStrip is on the left side of the content (e.g. RadMultiPage). Child tabs (if any) are shown on the right side of parent tabs.

RadTabStrip supports two layouts - Horizontal (default) and Vertical.

In Horizontal layout, the Align property allows you to specify the way tabs position themselves:

  • Left - tabs will be left aligned;
  • Right - tabs will be right aligned;
  • Center - tabs will be centered;
  • Justify - tabs will be proportionally resized to full-up the width of the tabstrip.

In Vertical layout, the values of the Align property are as follows:

  • Left - tabs will be aligned to the top;
  • Right - tabs will be aligned to the bottom;
  • Center - tabs will be positioned in the middle;
  • Justify - tabs will be proportionally resized to full-up the height of the tabstrip.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.Functionality.OrientationAndAlignment.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <div class="demo-container no-bg size-narrow">
            <div class="demo-content">
                <h2>TabStrip representing different types of orientation.</h2>
                <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1"  Orientation="HorizontalTop" Width="400px"
                    SelectedIndex="0" MultiPageID="RadMultiPage1" Skin="Glow">
                    <Tabs>
                        <telerik:RadTab Text="Corporate">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Products">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Services">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1"  SelectedIndex="0"
                    CssClass="multiPage" Width="400px">
                    <telerik:RadPageView runat="server" ID="RadPageView1">
                        <img src="Images/Corporate.png" alt="corporate" />
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="RadPageView2">
                        <img src="Images/Products.png" alt="products" />
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="RadPageView3">
                        <img src="Images/Services.png" alt="services" />
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
                <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip2"  Orientation="HorizontalTop"
                    SelectedIndex="0" MultiPageID="RadMultiPage1" Skin="Glow">
                    <Tabs>
                        <telerik:RadTab Text="Corporate">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Products">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Services">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
            </div>
        </div>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
        <div class="demo-container no-bg size-narrow">
            <h2>TabStrip representing different types of alignment.</h2>
            <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip3"  SelectedIndex="0" Skin="Glow">
                <Tabs>
                    <telerik:RadTab Text="Products">
                        <Tabs>
                            <telerik:RadTab Text="Telerik UI for ASP.NET">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Telerik UI for WinForms">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Telerik Reporting">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Sitefinity CMS">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                    <telerik:RadTab Text="Services">
                        <Tabs>
                            <telerik:RadTab Text="Enterprise Services">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Enterprise Account Manager">
                            </telerik:RadTab>
                            <telerik:RadTab Text="On-site Training">
                            </telerik:RadTab>
                            <telerik:RadTab Text="GoToMeeting Sessions">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                    <telerik:RadTab Text="Corporate">
                        <Tabs>
                            <telerik:RadTab Text="Corporate Info">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Press Center">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Customers">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Awards">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </div>
    </telerik:RadAjaxPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Orientation options" Size="Narrow">
                    <asp:RadioButtonList runat="server" ID="OrientationOptions" OnSelectedIndexChanged="ChangeOrientation"
                        AutoPostBack="true">
                        <asp:ListItem Text="HorizontalTop" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="HorizontalBottom"></asp:ListItem>
                        <asp:ListItem Text="VerticalLeft"></asp:ListItem>
                        <asp:ListItem Text="VerticalRight"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Alignment Options" Size="Wide">
                    <asp:RadioButtonList ID="AlignmentOptions" runat="server" AutoPostBack="True"
                        OnSelectedIndexChanged="ChangeAlignment">
                        <asp:ListItem Value="Left" Selected="True">Left</asp:ListItem>
                        <asp:ListItem Value="Center">Center</asp:ListItem>
                        <asp:ListItem Value="Right">Right</asp:ListItem>
                        <asp:ListItem Value="Justify">Justify</asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance