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

Right-to-left Support

Decoration zone
Select Your Favorite Styles (<H5>):
Select Age (<H5>):
or



Telerik RadFormDecorator provides full right-to-left support, applied not only to the <body> element, but to any wrapping element as well.

The only thing that should be done is to add the dir="rtl" attribute to the element or to the <body> tag, or use the respective CSS property, i.e direction: rtl;.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.RightToLeftSupport.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all"
                                  DecorationZoneID="decorationZone" />
    <div id="decorationZone" class="demo-container size-custom">
        <fieldset>
            <legend>Decoration zone</legend>
            <div class="formRow" style="padding-right: 21px;">
                <h5 dir="ltr">Select Your Favorite Styles (&lt;H5&gt;):</h5>
                <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                    <asp:ListItem Text="Classic" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Rock" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Jazz and Fusion"></asp:ListItem>
                    <asp:ListItem Text="Rhythm and Blues"></asp:ListItem>
                    <asp:ListItem Text="Hard'n'Heavy"></asp:ListItem>
                </asp:CheckBoxList>
            </div>
            <div class="formRow" style="padding-right: 21px; padding-left: 21px;">
                <h5 dir="ltr">Select Age (&lt;H5&gt;):</h5>
                <asp:RadioButtonList ID="RadioButtonList2" runat="server">
                    <asp:ListItem Text="below 18"></asp:ListItem>
                    <asp:ListItem Text="18-22"></asp:ListItem>
                    <asp:ListItem Text="23-29" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="30-39"></asp:ListItem>
                    <asp:ListItem Text="40-49"></asp:ListItem>
                    <asp:ListItem Text="50-59"></asp:ListItem>
                    <asp:ListItem Text="60 and above"></asp:ListItem>
                </asp:RadioButtonList>
            </div>
            <div class="formRow" style="padding-left: 21px; border: 0;">
                <h5>
                    <label for="DropDownList1">
                        DropDown
                    </label>
                    or
                    <label for="ListBox1">
                        ListBox
                    </label>
                </h5>
                <br />
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="120">
                    <asp:ListItem Text="Select 1" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Select 2" Value="2"></asp:ListItem>
                    <asp:ListItem Text="Select 3" Value="3"></asp:ListItem>
                    <asp:ListItem Text="Select 4" Value="4"></asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="false" Width="100">
                    <asp:ListItem Text="List 1" Value="1"></asp:ListItem>
                    <asp:ListItem Text="List 2" Value="2"></asp:ListItem>
                    <asp:ListItem Text="List 3" Value="3"></asp:ListItem>
                    <asp:ListItem Text="List 4" Value="4"></asp:ListItem>
                </asp:ListBox>
            </div>
            <div style="padding-left: 16px; clear: both;">
                <asp:Button ID="Button1" runat="server" Text="Submit Form"></asp:Button>
            </div>
        </fieldset>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance