TabStrip - Right-to-left Support

This TabStrip is in RTL mode:

  • Brazil
  • Italy
  • France
  • Canada
  • Great Britain
  • United States

This TabStrip is in LTR mode

  • Brazil
  • Italy
  • France
  • Canada
  • Great Britain
  • United States
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTabStrip provides support for right to left languages.

RadTabStrip considers the direction attribute set to the control itself or any parent HTML element. If you set the direction of the body tag (or any other parent element that contains the control) to rtl, RadTabStrip reverses the   tab order and aligns itself to the right side of the container.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" dir="rtl" ... />
  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>This TabStrip is in RTL mode:</h2>
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  SelectedIndex="3" Skin="Default"
            dir="rtl">
            <Tabs>
                <telerik:RadTab Text="Brazil" ImageUrl="../../../Images/Flags/brazil.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Italy" ImageUrl="../../../Images/Flags/it.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="France" ImageUrl="../../../Images/Flags/fr.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Canada" ImageUrl="../../../Images/Flags/ca.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Great Britain" ImageUrl="../../../Images/Flags/gb.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="United States" ImageUrl="../../../Images/Flags/us.gif">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    <div class="demo-container size-wide">
        <h2>This TabStrip is in LTR mode</h2>
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip2" runat="server"  SelectedIndex="3" Skin="Default">
            <Tabs>
                <telerik:RadTab Text="Brazil" ImageUrl="../../../Images/Flags/brazil.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Italy" ImageUrl="../../../Images/Flags/it.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="France" ImageUrl="../../../Images/Flags/fr.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Canada" ImageUrl="../../../Images/Flags/ca.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="Great Britain" ImageUrl="../../../Images/Flags/gb.gif">
                </telerik:RadTab>
                <telerik:RadTab Text="United States" ImageUrl="../../../Images/Flags/us.gif">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?