Changing controls order in row class div bootstrap 3 - css

Well, I'am building a web application that uses twitter bootstrap 3 , and supports both languages English and Arabic with two different master pages for each,
am using div with class .row to put my controls inside
controls inside rows by default starts from left to right
when I change my website language to Arabic I want to reverse all items inside rows from right to left
am changing the master page with my stylesheet files, I've tried floating and directions but it never works for me for items inside div 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 that when i change the display order to rtl, is to change the controls inside my row
When Direction From Left To Right but controls are not showing as expected

Well, you have unusable html in your post, so I can't test this, but last year I contributed to this old repository: https://github.com/carasmo/bootstrap-rtl/blob/master/dist/css/bootstrap-rtl.css
Has some useful code when you change direction. It's 3.1 but some of it still works well. You'll have to pick through it to see what you need to tweek.
Here's an example of the 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>

Related

ASP.NET webforms fields not aligning properly

I have the following registration form that I have built in ASP.NET webforms using VS 2017 using Bootstrap 3.4.1.
I had used the same code on with Bootstrap 2 some time ago and it worked great:
The drop down and button are a little wider than the text boxes. How do I fix this.
Code for Register.aspx
<div class="col-sm-5 col-xs-5">
<div class="col-xs-12">
<h4>Create a new account</h4>
<hr />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<asp:DropDownList runat="server" ID="UserName" CssClass="form-control" TextMode="UserName" placeholder="UserName" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The UserName field is required." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star-empty"></span></span>
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" placeholder="Password" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The password field is required." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" placeholder="Confirm Password" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
<asp:TextBox runat="server" ID="PhoneNumber" TextMode="SingleLine " CssClass="form-control" placeholder="Phone Number" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="PhoneNumber" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The phone number field is required." />
<div class="form-group">
<asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-block btn-default" />
</div>
<div class="form-group">
<p>
By clicking on "Register", you agree to the <a data-toggle="modal" href="#termsOfUseModal">Terms of Use</a> and the
<a data-toggle="modal" href="#privacyModal">Privacy Policy</a>.
</p>
</div>
<asp:PlaceHolder runat="server" ID="DisplayEmail" Visible="false">
<p class="text-info">
Please check your email and confirm your email address.
</p>
</asp:PlaceHolder>
</div>
</div>
Finally fixed it by having this code in Site.css.
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.jumbotron {
margin-top: 20px;
}
.body-content {
padding: 0;
}
}
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav {
margin-top: 20px;
}
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not(.dropdown-menu) {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}

ASP Update Progress control never comes back, continues to display progress bar

I have a web page that contains a UpdateProgress control. When I execute the following code the progress bar displays and never goes away.
protected void lnkBtnName_Click(object sender, EventArgs e)
{
int index = ((GridViewRow)((LinkButton)sender).Parent.Parent).RowIndex;
hdnGvSelectedIndex.Value = index.ToString();
SetPageContent();
}
private void SetPageContent()
{
try
{
ResetControls();
if (gv.Rows.Count > 0)
{
index = Convert.ToInt32(hdnGvSelectedIndex.Value);
id = Convert.ToInt64(gv.DataKeys[index].Values[0].ToString());
hdnID.Value = id.ToString();
if (gv.Rows.Count > 0)
gv.SelectedIndex = index;
}
var _obj = _manager.GetByID(id).FirstOrDefault();
if (_obj != null)
{
txtName.Text = _obj.Name;
txtDisplayName.Text = _obj.DisplayName;
}
}
catch (Exception ex)
{
// Error processing
}
}
The web page...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style="text-align: center;">
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="Content/img/loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed; top: 45%; left: 50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<asp:UpdatePanel ID="updpnlContentDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField runat="server" ID="hdnEnvironmentType" />
<asp:HiddenField runat="server" ID="hdnID" />
<asp:HiddenField runat="server" ID="hdnGvSelectedIndex" Value="0" />
<asp:HiddenField runat="server" ID="hdnButtonPermission" Value="0" />
<asp:HiddenField runat="server" ID="hdnSelectedTab" Value="0" />
<asp:HiddenField runat="server" ID="hdnButtonStatus" Value="Active" />
<div class="row">
<div class="col-md-3">
<h5>Manage Detail</h5>
<div class="filterWrapper relative" id="dvLeftcontentdetail">
<div class="clearfix whiteBg">
<div class="pull-left">
<label>Bucket Type</label>
</div>
<div class="pull-right">
<span class="addBtn">Add
<asp:Button ID="lnkbtnAdd" runat="server" OnClick="lnkbtnAdd_Click" CssClass="btn btn-add pull-right"></asp:Button>
</span>
</div>
</div>
<div class="input-group clearfix col-sm-12">
<asp:TextBox CssClass="form-control height26" ID="txtSearchName" runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" CssClass="btn btn-black glyphicons filter btn-icon white input-group-btnbtnmargin"></asp:Button>
<i></i>
</span>
</div>
<div id="divgv">
<div id="" class="gridview2 relative" style="height: 424px;">
<asp:GridView CssClass="gridview" ID="gv" runat="server" DataKeyNames="ID" PageSize="13" OnPageIndexChanging="gv_PageIndexChanging" ShowHeader="False"
AutoGenerateColumns="false" AllowPaging="true">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Visible="false" Text='<%#Eval("ID") %>' />
<asp:LinkButton ID="lnkBtnShowContentDetail" runat="server" Text='<%#Eval("Name") %>' CommandName="Select" OnClick="lnkBtnName_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="gridview-pager"></PagerStyle>
<SelectedRowStyle CssClass="gvSelectedRow" />
</asp:GridView>
<div id="content"></div>
<div class="filterResults relative btnGroup">
<div class="btn-groupSpecial">
<asp:Button ID="lnkbtnActive" runat="server" Text="Active" OnClick="lnkbtnActive_Click" OnClientClick="return ConfirmMessage(4); " CssClass="results-control col-xs-4 active"></asp:Button>
<asp:Button ID="lnkbtnInActive" runat="server" Text="InActive" OnClick="lnkbtnInActive_Click" OnClientClick="return ConfirmMessage(5);" CssClass="results-control col-xs-4"></asp:Button>
<asp:Button ID="lnkbtnAll" runat="server" Text="All" OnClick="lnkbtnAll_Click" CssClass="results-control col-xs-4" OnClientClick="return ConfirmMessage(6);"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<h5>Details</h5>
<div id="dvRightContent" class="row clearfix relative btnGroup btnGroup3" style="height: 492px;">
<div class="tabControls">
<ul class="nav nav-tabs">
<li class="col-xsm-100 nav-tabs-content active"><span class="linkDisabledsp"> </span><a data-toggle="tab" href="#manageDetailTab" onclick="SetSelectedTab('contentTab')">Bucket Details</a></li>
</ul>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<label for="iconName">Name</label>
<asp:TextBox CssClass="form-control" ID="txtName" MaxLength="250" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<label for="iconName">Display Name</label>
<asp:TextBox CssClass="form-control" ID="txtDisplayName" MaxLength="250" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="col-md-12 btnGroup2 row navbar-fixed-bottom">
<div class="btn-groupSpecial clearfix">
<asp:Button ID="lnkbtnSave" OnClientClick="return FormValidation();" runat="server" Text="Save" OnClick="lnkbtnSave_Click" CssClass="results-control col-xsm-32"></asp:Button>
<asp:Button ID="lnkbtnCancel" runat="server" OnClientClick=" return ConfirmMessage(2);" Text="Cancel" OnClick="lnkbtnCancel_Click" CssClass="results-control col-xsm-32"></asp:Button>
<asp:Button ID="lnkbtnDelete" runat="server" OnClientClick="return ConfirmMessage(3);" Text="Delete" OnClick="lnkbtnDelete_Click" CssClass="results-control col-xsm-32"></asp:Button>
</div>
</div>
</div>
</div>
</div>
<div id="AlertBox" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Alert</h4>
</div>
<div class="modal-body">
<p id="alertMessage" runat="server"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="btnOK" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<!-- Modal Dialog -->
<div id="ConfirmBox" class="modal fade" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Confirm?</h4>
</div>
<div class="modal-body">
<p id="ConfirmBoxMessage"></p>
</div>
<div class="modal-footer">
<asp:Button ID="btnConfirmedSave" CssClass="btn btn-danger" runat="server" Text="OK" UseSubmitBehavior="false" data-dismiss="modal" OnClick="lnkbtnSave_Click" Style="display: none;"></asp:Button>
<asp:Button ID="btnConfirmedCancel" CssClass="btn btn-danger" runat="server" Text="OK" UseSubmitBehavior="false" data-dismiss="modal" OnClick="lnkbtnCancel_Click" Style="display: none;"></asp:Button>
<asp:Button ID="btnConfirmedDelete" CssClass="btn btn-danger" runat="server" Text="OK" UseSubmitBehavior="false" data-dismiss="modal" OnClick="lnkbtnDelete_Click" Style="display: none;"></asp:Button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Why is the UpdateProgress control not returning?
Thanks
Try to set the AssociatedUpdatePanelID property of the progress control.
The UpdateProgress control renders a <div> element that is displayed
or hidden depending on whether an associated UpdatePanel control has
caused an asynchronous postback.
So you are Missing that Associated UpdatePanelID that has caused the asynchronous Postback
Try to change your update Progress as follows:
<div style="text-align: center;">
<asp:UpdateProgress ID="updateProgress" AssociatedUpdatePanelID ="updpnlContentDetail" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="Content/img/loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed; top: 45%; left: 50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
For More Information about Update Progress refer this Source

ASP Validation Group Not Working

There are several pages which show the same code, just different field names.
What I'm struggling to understand is why the validation is not getting called on button click which is set to cause validation, all fields, required field validators and regular expression validators all have the same group.
Update
I remember this working (a project that got dropped and then picked up) previously, so the only things I can think of is either the web.config or the c# back end stopping it. I would not have thought the back end of the page is doing this as the button causes validation on click.
What else could be stopping this?
Code:
<%# Page Title="" Language="C#" MasterPageFile="~/DirectDebit/MasterDDSite.Master" AutoEventWireup="true" CodeBehind="DDI_2.aspx.cs" Inherits="CustomerServicePortal.DDI_Forms.DDI_2" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
function CheckNumeric(e) {
if (window.event) // IE
{
if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
event.returnValue = false;
return false;
}
}
else { // Fire Fox
if ((e.which < 48 || e.which > 57) & e.which != 8) {
e.preventDefault();
return false;
}
}
}
</script>
<style type="text/css">
.style1 {
height: 28px;
}
table {
border-spacing: 2px;
border-collapse: separate;
}
.valError {
color: red;
border: 2px solid red;
margin: 5px 0px;
padding: 15px;
}
.valError ul {
color: red;
}
.valError li {
color: red;
}
.validation_summary {
color: red !important;
}
</style>
<div class="jumboservice">
<h2>Company Details</h2>
<div id="cmpnyDetails">
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Title:</h4>
</div>
<div class="ui-block-b">
<span>
<asp:TextBox ID="title" runat="server" ValidationGroup="vg1"></asp:TextBox>
*</span>
<asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="title" ValidationGroup="vg1" ErrorMessage="Title is a required field." Display="None"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator Display="None" ValidationGroup="vg1" ControlToValidate="title" ID="Rev3" ValidationExpression="^[\s\S]{2,5}$" runat="server" ErrorMessage="Title requires between 2 and 5 characters."></asp:RegularExpressionValidator>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Forename(s):</h4>
</div>
<div class="ui-block-b">
<span>
<asp:TextBox ID="forename" runat="server" ValidationGroup="vg1"></asp:TextBox>
*</span>
<asp:RegularExpressionValidator Display="None" ValidationGroup="vg1" ControlToValidate="forename" ID="RegularExpressionValidator1" ValidationExpression="^[\s\S]{2,25}$" runat="server" ErrorMessage="Forename requires between 2 and 25 characters."></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="forename" ValidationGroup="vg1" ErrorMessage="Forename is a required field." Display="None"></asp:RequiredFieldValidator>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Surname:</h4>
</div>
<div class="ui-block-b">
<span>
<asp:TextBox ID="surname" runat="server" ValidationGroup="vg1"></asp:TextBox>
*</span>
<asp:RequiredFieldValidator ID="rfv3" runat="server" ControlToValidate="surname" ValidationGroup="vg1" ErrorMessage="Surname is a required field." Display="None"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator Display="None" ValidationGroup="vg1" ControlToValidate="surname" ID="RegularExpressionValidator2" ValidationExpression="^[\s\S]{3,45}$" runat="server" ErrorMessage="Surname requires between 3 and 45 characters."></asp:RegularExpressionValidator>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Telephone:</h4>
</div>
<div class="ui-block-b">
<span>
<asp:TextBox ID="CompanyTele" runat="server" onkeypress="CheckNumeric(event);" ValidationGroup="vg1"></asp:TextBox>
*</span>
<asp:RegularExpressionValidator Display="None" ValidationGroup="vg1" ControlToValidate="CompanyTele" ID="RegularExpressionValidator10" ValidationExpression="^[0-9]{10,20}$" runat="server" ErrorMessage="Telephone requires between 10 and 20 numbers."></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="rfv9" runat="server" ControlToValidate="CompanyTele" ValidationGroup="vg1" ErrorMessage="Telephone is a required field." Display="None"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<p><strong>*</strong> - Fields marked with an asterisk are mandatory.</p>
<asp:ValidationSummary ID="ValidationSummary1"
runat="server" ShowMessageBox="false"
ShowSummary="true" ValidationGroup="vg1"
ForeColor="Red" DisplayMode="BulletList"
CssClass="valError" HeaderText="<span><strong>The below requires attention:</strong></span>" />
<div class="ui-grid-d">
<div class="ui-block-a">
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<asp:Button ID="Submit" CausesValidation="true" ValidationGroup="vg1" runat="server" CssClass="ui-btn ui-corner-all" Text="continue" OnClick="Submit_Click" />
</div>
</div>
</div>
</div>
</div>
</asp:Content>
Remove the "validation group" from the text-box fields. You should only add the "validation group" in the validation field, referencing the control you wish to validate.

How to align buttons properly in css/asp.net?

I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.input
{
clear: left;
margin: 0 0 0.2em;
padding: 6pt 1em;
}
.flclass
{
float: left;
}
.imageDetails
{
color: Gray;
line-height: 1.2;
margin: 34px 0 0 10px;
}
input.special
{
background: none repeat scroll 0 0 #913297;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="input">
<label>
panel 1</label>
<asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
Width="200px" Height="70px">
<asp:Literal ID="lt1" runat="server" Text="Panel left" />
<asp:HyperLink ID="hl1" runat="server" Target="_blank">
<asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<div class="flclass">
<p class="imageDetails">
<asp:Literal ID="lt4" Text="what to write here?" runat="server" />
</p>
</div>
<label>
small image</label>
<asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<asp:Literal ID="lt2" runat="server" Text="Panel right" />
<asp:HyperLink ID="hl2" runat="server" Target="_blank">
<asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<p class="imageDetails" style="margin-top: 5px">
<asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
<div class="input" style="margin: top">
<label>
</label>
<asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" />
<asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" />
<asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
Style="margin-top: 26px; margin-left: 10px" Visible="true" />
</div>
</div>
</form>
</body>
</html>
Change ur code
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
For future viewers, I found that this works better:
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.

Help with aligning the controls

I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>

Resources