[RESOLVED] MVC: Bootstrap Form in View

I am trying so hard to bootstrap the registration form in an MVC application and the email address field is not going to full width. Been searching all night and have not been able to get this to work so far. Any ideas?

This is the code for the form:

Code:

---

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="panel panel-primary box-shadow">
                <div class="panel-heading">
                    <hgroup>
                        <h3 class="panel-title">Register Account</h3>
                    </hgroup>
                </div>

                <div class="panel-body">
                    <div class="container">
                        @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { role = "form" }))
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(false, "Please correct the following issues and try again:", new { @class = "alert alert-danger", role = "alert" })

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <hgroup>
                                        <h3 class="panel-title">Your Name</h3>
                                    </hgroup>
                                </div>

                                <div class="panel-body">
                                    <div class="container">
                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.FirstName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.FirstName, new { placeholder = "First Name", tabindex = "1", @class = "form-control input-md" })
                                            </div>
                                        </div>

                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.MiddleName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.MiddleName, new { placeholder = "Middle Name", tabindex = "2", @class = "form-control input-md" })
                                            </div>
                                        </div>

                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.LastName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.LastName, new { placeholder = "Last Name", tabindex = "3", @class = "form-control input-md" })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <hgroup>
                                        <h3 class="panel-title">Login Credentials</h3>
                                    </hgroup>
                                </div>

                                <div class="panel-body">
                                    <div class="container">
                                        <fieldset class="form-group">
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                                                        @Html.LabelFor(m => m.EmailAddress, new { @class = "sr-only form-label" })
                                                        @Html.TextBoxFor(m => m.EmailAddress, new { placeholder = "Email Address", tabindex = "4", @class = "form-control input-md" })
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
                                                    @Html.LabelFor(m => m.Password, new { @class = "sr-only form-label" })
                                                    @Html.PasswordFor(m => m.Password, new { placeholder = "Password", tabindex = "5", @class = "form-control input-md" })
                                                </div>
                                            </div>

                                            <div class="col-xs-12 col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
                                                    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "sr-only form-label" })
                                                    @Html.PasswordFor(m => m.ConfirmPassword, new { placeholder = "Confirm Password", tabindex = "6", @class = "form-control input-md" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" title="Register">
                                <span class="fa fa-thumbs-o-up" aria-label="Register"> Register</span>
                            </button>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

This is how the form is displaying. I am trying to get the email address input to full width.
Attachment 136915

There must be a css style somewhere in your project that set's the max-width of input control to a fixed width such as below:

CSS Code:

input {
    max-width: 250px; //example only. value may differ in your end.
}

If found, you can change it to 100% or set it with the desired width value.

- kgc

I inspected the element and think I may have found the problem.

line 42 in site.css is showing max-width: 280px for input, textarea and select.

The email address is the fourth element in the page, so will see if i can override the width using nth()

Jeez!
I just decided to comment out the 280px width and change to 100% and it fixed the problem.
Was searching ALL night for this.

Code:

---

input,
select,
textarea {
    max-width: 100%;
    /*max-width: 280px;*/
}

---

Attachment 136939