Changing the control order in the class loading block class 3
Well i'm building a web app that uses twitter bootstrap 3 and supports both english and arabic languages with two different master pages for each, i use div
with a class .row
to put my controls inside controls inside lines by default start left to the right when i change the language of my site to arabic i want to change all the elements inside the lines from right to left i change the master page with my style files i tried float and guide but never works for me for elements inside divs with .row
class
<asp:Panel ID="pnl_TaskContent" runat="server" class="row">
<asp:Panel ID="pnl_TaskColumn" runat="server" class="col-md-12">
<div class="box-body">
<div class="row">
<div class="col-md-3">
<%--Task Name--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Name" runat="server" Text="Task Name" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil">
<asp:RequiredFieldValidator ID="RequiredFieldValidator27" runat="server" ErrorMessage="*"
ControlToValidate="txt_Task_Name" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:TextBox ID="txt_Task_Name" runat="server" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
<div class="input-group-btn">
<asp:Button ID="button_tf" CssClass="btn btn-default dropdown-toggle" runat="server" Text="Functions" data-toggle="dropdown" ValidationGroup="none" />
<ul class="dropdown-menu">
<li>
<asp:Button ID="btn_AddTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Add/Edit" data-toggle="modal" data-target="#addTaskFunctions-modal" /></li>
<li>
<asp:Button ID="btn_BrowseTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Edit" data-toggle="modal" data-target="#BrowseTaskFunctions-modal" /></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<%--Task Status--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Status" runat="server" Text="Task Status" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-signal">
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ErrorMessage="*"
ControlToValidate="ddl_Task_Status" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:DropDownList ID="ddl_Task_Status" runat="server" ClientIDMode="Static" CssClass="form-control" Enabled="False">
<asp:ListItem Value="N">New</asp:ListItem>
<asp:ListItem Value="A">Active</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-3">
<%--Task Priority--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Proirity" runat="server" Text="Task Priority" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flag">
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ErrorMessage="*"
ControlToValidate="ddl_Task_Proirity" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:DropDownList ID="ddl_Task_Proirity" runat="server" ClientIDMode="Static" CssClass="form-control">
<asp:ListItem Value="H">High</asp:ListItem>
<asp:ListItem Value="M">Medium</asp:ListItem>
<asp:ListItem Value="L">Low</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-3">
<%--Completion Rate--%>
<div class="form-group">
<asp:Label ID="lbl_Task_CompRate" runat="server" Text="Completion Rate" Font-Bold="True" Font-Italic="False"></asp:Label>
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txt_Task_CompRate" ErrorMessage="0-100" Font-Bold="True" ForeColor="Red" MaximumValue="100" MinimumValue="0" SetFocusOnError="True" Type="Integer" ValidationGroup="saveTask"></asp:RangeValidator>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flag">
<asp:RequiredFieldValidator ID="RequiredFieldValidator31" runat="server" ErrorMessage="*"
ControlToValidate="txt_Task_CompRate" ForeColor="Red" Font-Bold="True" Font-Size="Medium" ValidationGroup="saveTask"></asp:RequiredFieldValidator>
</i></span>
<asp:TextBox ID="txt_Task_CompRate" runat="server" ClientIDMode="Static" CssClass="form-control">0</asp:TextBox>
<span class="input-group-addon"><i><b>%</b>
</i></span>
</div>
</div>
</div>
</div>
what i want when changing the display order to rtl there is a change of controls inside my string
When the direction is left to right, but the controls are not showing as expected
+3
source to share
1 answer
You have unusable html in your post, so I can't verify this, but I contributed to this old repository last year: https://github.com/carasmo/bootstrap-rtl/blob/master/dist/css/ bootstrap-rtl.css
Has helpful code when changing direction. It's 3.1, but some of them still work well. You will need to pick it up to see what you need to tweak.
Here's an example of input group fixes:
DEMO: http://jsbin.com/tipufu/1/edit
Assumes
body {direction:rtl}
CSS for RTL:
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:first-child {
border-right: 1px solid #cccccc;
border-left: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group-addon:last-child {
border-right: 0;
border-left: 1px solid #cccccc;
}
.input-group-btn:first-child > .btn {
margin-left: -1px;
}
.input-group-btn:last-child > .btn {
margin-right: -1px;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-right: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
SOME HTML
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
+3
source to share