Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.


<pre>Below is screen shot for reference;

screen shot




C#
<pre><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>



What I have tried:

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.
Posted
Updated 10-Apr-20 3:10am

1 solution

Quote:
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.
So basically it sounds like your detection and code are working perfectly fine; and what is not working is the Bootstrap.css file that you are using.

If that is the case; what I would do is research RTL support for Bootstrap
Google Search: Bootstrap rtl support[^]

And see what is available. It does look like there are alternative stylesheets that can be used at least; and if that is the way you want to go you could just switch out which CSS is being used.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900