Asp.Net > Localization > Direction RightToLeft property not working with BootStrap columns
Question
-
User1812006826 posted
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 screen shot for reference;
https://i.ibb.co/kySYS8c/2020-04-09-21-12-11.png
<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>
All replies
-
User1535942433 posted
Hi askArvindYadav,
Acccroding to your description,I suggest you could use Bootstrap RTL follow Botstrap.It will automatically flip placements from right to left.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css"/> <div> <asp:Panel runat="server" DefaultButton="login" ID="pnlLoginForm"> <div class="login-form"> <div class="form"> <h4 class="modal-title">>العربية (المملكة العربية السعودية <%-- Login to your account--%> </h4> <table> <tr> <td>>العربية (المملكة العربية السعودية</td> <td> <asp:TextBox runat="server" /></td> </tr> <tr> <td>>العربية (المملكة العربية السعودية</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 row"> <label for="Username" class="col-md-3 col-form-label text-md-right">العربية (المملكة العربية السعودية</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 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"> <a href="#" class="forgot-link" data-toggle="modal" data-target="#usernameModal" onclick="ClearTextBox();">نسيتواسم المستخدمالنص</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 row"> <label for="Username" class="col-md-3 col-form-label text-md-right">العربية (المملكة العربية السعودية</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"> <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"> <a href="#" class="forgot-link" data-toggle="modal" data-target="#myModal" onclick="ClearTextBox();">نسيت كلمة المرور </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">تذكرنى</asp:Label> </div> <script> function ClearErrorMsg() { $("#MainContent_lblErrormsg").html(''); } </script> <asp:Button runat="server" ID="login" UseSubmitBehavior="false" OnClientClick="ClearErrorMsg();" OnClick="login_Click1" Text="تسجيل الدخول" 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="انجليزية الولايات المتحدة)" 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"></span> </div> </div> <div class=" form-group warningclass Error clearfix"> <div class="col-md-12"> </div> </div> </div> </div> </asp:Panel> </div>More details,you could refer to below article:
https://github.com/morteza/bootstrap-rtl
Result:
Best regards,
Yijing Sun
