Asp.Net > Localization > Direction RightToLeft property not

Question

Requirement: We are developing a web application in Asp.Net Web-Forms. Along with English language we have to implement Arabization (Arabic Language) support for application pages. Thus, when the language is English, Content and controls placement should be Left to Right. Whereas when language is Arabic, Content and controls placement should be Right to Left.

What we did: To achive this requirements we have used Asp.Net Resource files. Using this we are able to change language content. To change direction of controls we placed our login form into asp:panel control and set it's Direction property to RightToLeft when language is arabic.

Problem: On doing above implementation, normal content and controls which are in table change their direction RTL. However, controls in Bootstrap columns do not switch postions.

Below is a screenshot for reference;

 

<asp:Panel runat="server" DefaultButton="login" ID="pnlLoginForm">
    <div class="login-form">
        <div class="form">
            <div style="margin: 10px auto; width: 207px">
                <img src="../Content/images/login-logo.png" />
            </div>
            <h4 class="modal-title">
                <%=Resources.userlogin.LoginHeaderText %>
                <%-- Login to your account--%>
            </h4>
                <table>
                <tr><td>User Name</td><td><asp:TextBox runat="server" /></td></tr>
                <tr><td>Password</td><td><asp:TextBox runat="server" /></td></tr>
            </table>
            <div class=" form-group warningclass Error clearfix">
                <div class="col-md-12 errorclass">
                    <div runat="server" id="lblErrormsg"></div>
                </div>
            </div>

            <div class="form-group">
                <label for="Username" class="col-md-3 col-form-label text-md-right"><%=Resources.userlogin.UserName %></label>
                <div class="col-md-9">
                    <asp:TextBox runat="server" ValidationGroup="login" ID="txtEmail" placeholder="" CssClass="form-control" autocomplete="off" MaxLength="50" onclick="ClearLiteral();" />
                </div>

                <%--<div class="col-md-12">
                    <label for="Username" class="col-md-3 col-form-label" runat="server" id="lblUserName">
                        <%=Resources.userlogin.UserName %></label>
                    <div class="col-md-9" runat="server" id="divTxtUserName">
                        <asp:TextBox runat="server" ValidationGroup="login" ID="txtEmail" placeholder="" CssClass="form-control" autocomplete="off" MaxLength="50" onclick="ClearLiteral();" />
                    </div>
                </div>--%>
                <div class="col-md-12 text-md-right">
                    <asp:RequiredFieldValidator
                        ID="reqUserName"
                        ValidationGroup="login" runat="server" ControlToValidate="txtEmail" Display="Dynamic" CssClass="Error" ErrorMessage="Please Enter Your Username" />
                </div>
                <div class="col-md-12 text-md-right">
                    <a href="#" class="forgot-link" data-toggle="modal" data-target="#usernameModal" onclick="ClearTextBox();"><%=Resources.userlogin.ForgotUsernameText %></a>
                </div>
                <%--  <asp:RegularExpressionValidator ValidationGroup="login" runat="server" CssClass="Error" ErrorMessage="Please Enter A Valid EmailID " Display="Dynamic" ID="RegularExpressionValidator1" ControlToValidate="txtEmail" ValidationExpression="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"></asp:RegularExpressionValidator>--%>
            </div>
            <div class="form-group">
                <label for="Username" class="col-md-3 col-form-label text-md-right"><%=Resources.userlogin.Password %></label>
                <div class="col-md-9">
                    <asp:TextBox runat="server" ID="txtPassword" placeholder="" ValidationGroup="login" TextMode="Password" CssClass="form-control" MaxLength="16" />
                    <!--showpass display: none;-->
                    <div class="input-group-append" style="height: 40px; display: none;">
                        <button id="show_password" class="btn btn-primary" type="button">
                            <span class="fa fa-eye-slash icon"></span>
                        </button>
                    </div>
                </div>
                <div class="col-md-12 text-md-right">
                    <asp:RequiredFieldValidator
                        ID="reqLoginPassword"
                        ValidationGroup="login" runat="server" ControlToValidate="txtPassword" CssClass="Error" Display="Dynamic" ErrorMessage="Please Enter Your Password" />
                    <asp:RegularExpressionValidator runat="server" CssClass="Error" ValidationGroup="login" ID="revPassword" Display="Dynamic" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$" ControlToValidate="txtPassword" ErrorMessage="Password Must Be At Least One Uppercase Letter, One Lowercase Letter, One Number And One Special Character"></asp:RegularExpressionValidator>
                </div>
                <div class="col-md-12 text-md-right">
                    <a href="#" class="forgot-link" data-toggle="modal" data-target="#myModal" onclick="ClearTextBox();">

                        <%=Resources.userlogin.ForgotPasswordText %>

                    </a>
                </div>
            </div>
            <div class="form-group-btn small clearfix">
                <div class="col-md-12">
                    <div class="checkbox">
                        <asp:CheckBox runat="server" class="checkbox-inline" ID="chkRememberMe" />
                        <asp:Label runat="server" AssociatedControlID="chkRememberMe"><%= Resources.userlogin.RememberMeText %></asp:Label>

                    </div>
                    <script>
                        function ClearErrorMsg() {
                            $("#MainContent_lblErrormsg").html('');

                        }
                    </script>
                    <asp:Button runat="server" ID="login" UseSubmitBehavior="false" OnClientClick="ClearErrorMsg();" OnClick="LogIn" Text="Login" CssClass="btn btn-primary btn-block btn-lg" ValidationGroup="login" />
                </div>
            </div>
            <div class="form-group-btn small clearfix">
                <div class="col-md-12  font12">
                    <%--<span class="pull-left">English (United States)</span>--%>
                    <span class="pull-left">
                        <asp:DropDownList ID="ddlLanguage" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
                            <asp:ListItem Value="en-us" Text="English (United States)" Selected="True"></asp:ListItem>
                            <asp:ListItem Value="ar-SA" Text=">??????? (??????? ??????? ????????"></asp:ListItem>
                        </asp:DropDownList>
                        <%-- <select id="ddlLanguage">
                             <option value="0"> English (United States)</option>
                             <option value="0">??????? (??????? ??????? ????????)</option>
                         </select>--%>
                    </span>
                    <span id="warningtext" class="Error pull-right">
                        <%=Resources.userlogin.CapsLockErrorMsg %></span>
                </div>
            </div>
            <div class=" form-group warningclass Error clearfix">
                <div class="col-md-12">
                </div>
            </div>
        </div>
    </div>
</asp:Panel>