I'm having a problem with text fields not aligning properly in a Web Forms project. I created a New ASP.NET Web Application using Web Forms in Visual Studio 2013. I made a change to the ASP Identity user table to take additional information about each user. (Address, City State, Zip, Phone, Fax & Email) I then went into the Account Signup Register.aspx
page and copied the first field User Name
so that I would be using all the same bootstrap class names for each field etc.. and created several copies of it and renamed each one and have had no problem capturing that new information on the Register page.
HOWEVER
The rendered page is jacked up. Each new field I added is misaligned. See Here:
So now I will show you what my code looks like for that page.
UPDATED TO SHOW THE ERROR
LOOK AT COMMENT RIGHT BEFORE THE BUTTON DIV NEAR THE END OF THIS PAGE OF CODE
<%@ Page Title="Register" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WFK5.Account.Register" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<p class="text-danger">
<asp:Literal runat="server" ID="ErrorMessage" />
</p>
<div class="form-horizontal">
<h4>Create a new account.</h4>
<hr />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="text-danger" />
<div class="form-group">
<asp:Label ID="Label1" runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label">User name</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label2" runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Password"
CssClass="text-danger" ErrorMessage="The password field is required." />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label3" runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
</div>
<div class="form-group">
<asp:Label ID="Label4" runat="server" AssociatedControlID="Address" CssClass="col-md-2 control-label">Address</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Address" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label5" runat="server" AssociatedControlID="City" CssClass="col-md-2 control-label">City</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="City" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label6" runat="server" AssociatedControlID="State" CssClass="col-md-2 control-label">State</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="State" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label7" runat="server" AssociatedControlID="Zip" CssClass="col-md-2 control-label">Zip</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Zip" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label8" runat="server" AssociatedControlID="Phone" CssClass="col-md-2 control-label">Phone</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Phone" CssClass="form-control" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Phone"
CssClass="text-danger" ErrorMessage="The Phone field is required." />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label9" runat="server" AssociatedControlID="Fax" CssClass="col-md-2 control-label">Fax</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Fax" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label ID="Label10" runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Email" CssClass="form-control" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="Email"
CssClass="text-danger" ErrorMessage="The Email field is required." />
</div>
</div>
</div> <!--THIS DIV SHOULD HAVE BEEN THE CLOSING DIV FOR THE PASS CONF FIELD -->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button ID="Button1" runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
</div>
</div>
</div>
</asp:Content>
SORRY I KNOW THAT IS A LOT OF CODE: But I wanted to make sure I didn't leave anything out so I posted the entire page.
Also, here is a screen shot of the Design View in Visual Studio.
I understand, you can clearly see something is different about the placement and size of each text field in the design view, But I only touched the code. Is there a file somewhere else that maybe keeps track of some other type of formatting from the design view that may effect the final result on the page. I have used web forms before and never remember having this type of problem.
Any help or ideas would be so much appreciated. Functionally it works, but aesthetically it's crap and I can't figure it out.