I have a project with master page and content page in content page design not load as their html,that is project solution version 5. I think this version code changed but I'm trying to recover this from my solution version 4 since appear same problem i'm refreshing my browser but not work.........I don't understand what happened and what should i do now.
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-shopping-cart" aria-hidden="true"> </i>Product Info</h3>
</div>
<div class="panel-body">
<h6> Invoice Number</h6>
<asp:TextBox ID="tbxInvoice" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
<h6> Product Name</h6>
<asp:DropDownList ID="productNameDDL" CssClass="form-control" DataSourceID="" runat="server" OnTextChanged="productNameDDL_TextChanged">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-product-hunt" aria-hidden="true"></i> Product Quantity</h3>
</div>
<div class="panel-body">
<h6> Total Quantity</h6>
<asp:TextBox ID="tbxTotalQuantity" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
<div class="row">
<div class="col-md-6">
<h6> Total Price</h6>
<asp:TextBox ID="tbxTotalPrice" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
</div>
<div class="col-md-6">
<h6> Price/Item</h6>
<asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-dollar" aria-hidden="true"></i> Product Price</h3>
</div>
<div class="panel-body">
<h6> Sale Price/Item</h6>
<asp:TextBox ID="tbxSalePricePerQuantity" CssClass="form-control" runat="server"></asp:TextBox>
<h6> Comments</h6>
<asp:TextBox ID="tbxComments" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
For better understand check this design image
Try to check if you don't miss any reference to some CSS class. Try to remove CssClass="form-control" and see what happens.
Related
I am developing an ASP.NET webforms app, and I have a minor problem.
The page contains a GridView control that displays a list of office records, and the user can either add a new record or edit an existing one.
Either way, a Bootstrap modal form is launched. When the user clicks the 'Edit' button in the GridView, it loads the full record using the DataKey value of the selected row, and that SHOULD populate the fields of the modal form, which is then displayed.
The thing is, all of this works, except when the form opens, the fields are blank. The record does load from the database, and no error occurs, either in the ASP.NET code or in the javascript console in debug mode. Am I missing something about how this should work?
The modal code is as follows:
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
And the code in the ASP.NET code-behind file to load the selected record from the GridView into the modal is as follows:
protected void GvOffices_RowCommand ( object sender, GridViewCommandEventArgs e ) {
int dataKeyValue = (int)gvOffices.DataKeys[int.Parse(e.CommandArgument.ToString())].Value;
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
tbAddress1.Text = ofc.Address1;
tbAddress2.Text = ofc.Address2;
tbCity.Text = ofc.City;
tbGlobalRate.Value = ofc.GlobalRate.ToString ( );
tbLocalRate.Value = ofc.LocalRate.ToString ( );
tbLocalRateCap.Text = string.Format ( "${0}", ofc.LocalRateCap );
tbOfficeMgr.Text = ofc.OfficeMgr;
tbOfficeName.Text = ofc.OfficeName;
tbPhone.Text = ofc.OfficePhone;
tbZIP.Text = ofc.ZIPCode;
tbID.Value = ofc.ID.ToString ( );
ScriptManager.RegisterStartupScript ( this, this.GetType ( ), "Pry", "openModal()", true );
}
Again, all of this code works without throwing an error of any kind, and a record DOES get loaded from the database via a custom object:
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
Still, I don't understand why the form fields aren't being populated. Help please?
Well, it turns out the answer is to wrap the modal code in an UpdatePanel control, like so:
<asp:UpdatePanel ID="updModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Then, in the code-behind, add this line of code to the RowCommand event of the GridView control just before calling the script code to display the modal:
updModal.Update ( );
This allows me to populate the fields of the form from the code-behind and display them on the click of the GridView.
Thanks for the feedback I did get from some of you guys. Have a great day!
The following code works fine in 4.0 framework but not in 4.5. The form does not raise any error whenth invalid value is typed in textbox that goes against the regex defined. For e.g the txtFees should not allow any alpha characters. But form does not raise any errors any is successfully submitted.
Here is my code.
<%# Page Title="" Language="C#"
MasterPageFile="~/PresentationLayer/MasterPage.master"
AutoEventWireup="true" CodeFile="PackagesAdd.aspx.cs"
Inherits="PresentationLayer_PackagesAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
runat="Server">
<head>
<script src="../src/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="../production/css/sweetalert.css">
<script type="text/javascript">
function JSalert(x) {
swal(x);
}
</script>
</head>
<div class="x_panel">
<div class="x_title">
<h2>
Add Packages </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="x_content">
<br />
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Package Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtPackageName" runat="server" class="form-control col-md-7 col-xs-12"
ValidationGroup="Add"></asp:TextBox>
<asp:RegularExpressionValidator ID="RangeValidator1" runat="server" ControlToValidate="txtPackageName"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[a-zA-Z0-9 -.]{1,}$"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Fees
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtFees" runat="server" class="form-control col-md-7 col-xs-12"
ValidationGroup="Add"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtFees"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[0-9.]{1,}$"
SetFocusOnError="True" EnableClientScript="true" ></asp:RegularExpressionValidator>
</div>
</div>
<div class="ln_solid">
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 text-center">
<asp:Button ID="btnSubmit" runat="server" class="btn btn-success" Text="Add" ValidationGroup="Add"
CausesValidation="true" OnClick="btnSubmit_Click" />
</div>
</div>
</div>
</div> </asp:Content>
Try below block of code to resolve your issue.
//Error ValidationGroup.
you should add ValidationGroup name in Validation control.
<%# Page Title="" Language="C#"
MasterPageFile="~/PresentationLayer/MasterPage.master"
AutoEventWireup="true" CodeFile="PackagesAdd.aspx.cs"
Inherits="PresentationLayer_PackagesAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
runat="Server">
<head>
<script src="../src/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="../production/css/sweetalert.css">
<script type="text/javascript">
function JSalert(x) {
swal(x);
}
</script>
</head>
<div class="x_panel">
<div class="x_title">
<h2>
Add Packages </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="x_content">
<br />
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Package Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtPackageName" runat="server" class="form-control col-md-7 col-xs-12"> </asp:TextBox>
<asp:RegularExpressionValidator ID="RangeValidator1" runat="server" ControlToValidate="txtPackageName" ValidationGroup="Add"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[a-zA-Z0-9 -.]{1,}$"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Fees
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtFees" runat="server" class="form-control col-md-7 col-xs-12"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtFees" ValidationGroup="Add"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[0-9.]{1,}$"
SetFocusOnError="True" EnableClientScript="true" ></asp:RegularExpressionValidator>
</div>
</div>
<div class="ln_solid">
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 text-center">
<asp:Button ID="btnSubmit" runat="server" class="btn btn-success" Text="Add" ValidationGroup="Add"
CausesValidation="true" OnClick="btnSubmit_Click" />
</div>
</div>
</div>
</div> </asp:Content>
Did you try using setting UnobtrusiveValidationMode to none
protected void Application_Start(object sender, EventArgs e)
{
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}
So I'm trying to create a Login button but it seems as it doesnt fire, I've put a few breakpoints inside the eventhandler BtnLogin_Click but it's not reaching it.
Why is that?
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form id="loginForm" runat="server" class="user">
<div class="form-group">
<form>
<asp:TextBox TextMode="Email" ID="inputEmail" CssClass="form-control form-control-user" runat="server" placeholder="Enter Email Address..." />
</form>
</div>
<div class="form-group">
<form>
<asp:TextBox TextMode="Password" ID="inputPassword" CssClass="form-control form-control-user" runat="server" placeholder="Password" />
</form>
</div>
<asp:Button ID="LoginBtn" CssClass="btn btn-primary" Text="Login" runat="server" OnClick="BtnLogin_Click" />
</form>
<hr>
<div class="text-center">
<a class="small" href="Register.aspx">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the cs
protected void BtnLogin_Click(object sender, EventArgs e)
{
//Doesnt reach this
}
Litteraly i have a problem when put file upload in modal. On this problem, i have a modal bootstrap which have sort of textbox and fileupload as mandatory. When user click save button, then the table or in this case a gridview show name of file and added year while keep the modal is alive and not getting postback or closed.This illustration can be seen here
As long i have tried, i am using update panel to keep the bootstrap alive, but unfortunately, the backdraw is i cannot get any fileupload data. Can anyone tell me how to solve this problem ? or are there any ways to fulfill the condition above, as long as the modal keep alive when user keep save and the gridview is updated? Thank you :)
PS: this is my code
<asp:ScriptManager runat="server" ID="ScriptManager2" />
.....
<asp:Panel ID="pnlRegistrationPhase6" runat="server">
<div class="modal fade " id="registerStep6" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<asp:UpdatePanel runat="server" ID="updRegistrationStep6">
<ContentTemplate>
<div class="modal-body ac-modal-success p-a0">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 col-md-4 p-l0 hidden-sm hidden-xs img-content">
<img src="images/form_registrasi-14-14.jpg" class="img img-responsive btn-block">
</div>
<div class="col-xs-12 pt-15 pb-10 m-b20 hidden-lg hidden-md heading-reg6">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
<h4 class="text-strong m-t5">Certification</h4>
<ul>
<li>Maximum 3 (three) latest certifications which sorted from the last, required if already have certifications</li>
</ul>
</div>
<div class="col-lg-8 col-md-8 col-lg-offset-4 col-md-offset-4 form-content">
<div class="col-lg-12 p-r m-b10">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
</div>
<div class="col-lg-12 mt-20">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<p class="text-primary text-strong m-b0">Do you have Certification?</p>
<span>(Internship or Final Paper isn't considered as Certification)</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="yescertification" ClientIDMode="Static" OnClick="showStep6();" GroupName="certification" />
<label for="yescertification">Yes</label>
</div>
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="nocertification" ClientIDMode="Static" OnClick="hideStep6();" GroupName="certification" />
<label for="nocertification">No</label>
</div>
</div>
</div>
</div>
<div id="step6Content" class="col-lg-12 no-padding hide">
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Name of Certification<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationName" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationName" />
<label class="text-small" for="certname">Certification Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Name" ControlToValidate="txtCertificationName" runat="server" ValidationGroup="txtCertificationName" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Institution/Company<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationInstitution" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationInstitution" />
<label class="text-small" for="instname">Institution Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Institution/Company" ControlToValidate="txtCertificationInstitution" runat="server" ValidationGroup="txtCertificationInstitution" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Year of Certification<span class="text-danger">*</span></label>
<div class="col-lg-2">
<div class="form-group has-float-label">
<asp:DropDownList runat="server" ID="ddlYearCertification" CssClass="form-control form-flat minimal" ValidationGroup="ddlYearCertification" Width="100%" OnChange="removeTextddlYearCertification();" ClientIDMode="Static">
</asp:DropDownList>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ID="rfvddlYearCertification" ErrorMessage="Please Insert Year" ControlToValidate="ddlYearCertification" runat="server" Display="Dynamic" ValidationGroup="ddlYearCertification" InitialValue="0" />
</span>
<!--<label for="certyear">Combo Box</label>-->
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Upload Certificate</label>
<div class="col-lg-9">
<div class="media">
<div class="media-left media-middle">
<div class="box-upload">
<span class="btn btn-primary btn-pill">
<asp:FileUpload runat="server" ID="FileUploadCertificate" CssClass="hidden" />
<label for="file" class="m-b0">Choose File</label>
</span>
</div>
</div>
<div class="media-body media-middle">
<span class="text-danger text-small" style="color: #D64541;">There was an error uploading images.
<br>
Please check and try again.</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<asp:Button Text="Save" runat="server" CssClass="btn btn-primary btn-pill btn-modal-width" ID="btnSaveCertification" CausesValidation="true" OnClick="btnSaveCertification_Click " />
<asp:Button Text="Clear" runat="server" CssClass="btn btn-primary btn-pill m-l20 btn-modal-width" ID="btnClearCertification" OnClick="btnClearCertification_Click" />
<%-- <button class="btn btn-primary btn-pill btn-modal-width">Save</button>
<button class="btn btn-primary btn-pill m-l20 btn-modal-width">Clear</button>--%>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
</div>
</div>
</div>
</div>
<div class="col-lg-12 m-t20">
<div class="row form-group m-t20">
<div class="col-lg-8 col-lg-offset-3">
<button type="button" class="btn btn-primary btn-pill btn-modal-width" data-toggle="modal" data-target="#registerStep5" data-dismiss="modal">Previous</button>
<button type="button" class="btn btn-default btn-pill m-l20 btn-modal-width" data-toggle="modal" data-target="#registerStep7" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnClearCertification" />
<asp:AsyncPostBackTrigger ControlID="btnSaveCertification" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>
I have the following in an aspx file:
...
<div class="graybg">
<div id="clmn1">
<div class="title2">Pick Up From:</div>
<div id="pickup_options" class="selservice" runat="server">
<div class="boxes">
<asp:ImageButton class="box1" src="./box1.png" runat="server" OnClick="OnClickAddress" alt="Ground Address" />
<div class="boxtitle">Ground Address</div>
</div>
<div class="boxes">
<asp:ImageButton class="box1" src="./box2.png" runat="server" OnClick="OnClickAirport" alt="Airport" />
<div class="boxtitle">Airport</div>
</div>
</div>
<div id="pickup_airport" runat="server">
<div class="rows">
<div class="inputbtnholder">
<asp:TextBox class="input1" ID="TextBox1" placeholder="Enter Flight Number" runat="server"></asp:TextBox>
<div id="Div1_pkup" class="imgbtn searchbtn"></div>
</div>
</div>
<div class="rows">
<asp:TextBox class="input1 martop" ID="TextBox2" placeholder="Airport" runat="server" />
<div id="airport_search" class="imgbtn searchbtn" />
</div>
<div class="rows">
<div class="inputbtnholder">
<script type="text/javascript"> ...
<asp:TextBox ID="pickupdatetime" class="input1 martop" placeholder="Select Date and Time" runat="server"></asp:TextBox>
<div id="Div2_pkup" class="imgbtn datebtn"></div>
</div>
</div>
</div>
<div id="pickup_ground" runat="server">
<div class="inphld">
<asp:TextBox class="input1" ID="address" placeholder="Search for address" runat="server"></asp:TextBox>
<div id="searchbtn" class="imgbtn searchbtn"></div>
</div>
<div class="inphld">
<asp:TextBox class="input1 martop" ID="pickupdate" placeholder="Select Date and Time" runat="server"></asp:TextBox>
<div id="datebtn" class="imgbtn datebtn"></div>
</div>
</div>
</div>
</div>
<div class="selservice">
....
All my indentation matching inspections (manual and automatic) tell me that the div of class selservice in the last row is after the div of class graybg. When I publish and surf to the page in Chrome, the rendering is messed up. Inspection with the chrome developer tools shows that selservice follows clmn1 within graybg. If I remove the line defining "airport_search", the rendering is correct, and the developer tools show selservice following graybg, as it should.
Can anyone explain this?
Change from a self closing tag. I.e.
<div id="airport_search" class="imgbtn searchbtn" />
to
<div id="airport_search" class="imgbtn searchbtn"></div>