Web Form Text Fields Not straight on ASP Identity

2019-05-14 10:53发布

问题:

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.

回答1:

           <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>------------------------Missing This Closing 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>

The missing div is causing your css to be off. Usually when you have an alignment issue it is due to css or improper formatting.