Results 1 to 4 of 4

Thread: [RESOLVED] MVC: Bootstrap Form in View

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Apr 2005
    Location
    Debug.Print
    Posts
    3,885

    Resolved [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.
    Name:  Capture.jpg
Views: 2057
Size:  21.9 KB

  2. #2
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: MVC: Bootstrap Form in View

    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:
    1. input {
    2.     max-width: 250px; //example only. value may differ in your end.
    3. }

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

    - kgc
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Apr 2005
    Location
    Debug.Print
    Posts
    3,885

    Re: MVC: Bootstrap Form in View

    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()

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Apr 2005
    Location
    Debug.Print
    Posts
    3,885

    Re: MVC: Bootstrap Form in View

    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;*/
    }
    Name:  Capture.jpg
Views: 3555
Size:  14.1 KB

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width