Bootstrap 3 form in MVC 5 website not filling full width of browser screen

Intelli-Seeker
Intelli-Seeker used Ask the Experts™
on
I have a horizontal form that I created in an ASP.NET MVC 5 project with Bootstrap 3 (I know this is an old version and may convert to version 4 later). The form-horizontal form is not fitting the full width of the screen even though I have a total of 12 columns in the class. I'm sure it's a simple fix, I just haven't been able to figure it out. I am not using any custom CSS on this page. Here is part of the code. It just has one of the divs. I can provide full code if needed.

<h2>Create Customer</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Your columns are inside a form-group - they are only going to use as much space as the parent (form-group)

So if your form-group is constrained to 120px then your label will only be 20px wide and your control 100px wide.

We cannot see, from what you have given us, what is causing the problem.

You need to provide a link to a page that replicates the issue
OR
Post the rendered HTML for the form.

I suspect though that your form is not full width.

Try giving the elements in your form (and the form itself) background colours to see how much of the page they are taking up.

Author

Commented:
I used the default Entity Framework 6 scaffolding from MVC 5 that built the index, create, details, edit, and delete views. Does Bootstrap 3 set the field width for the form-group? I thought that it sets the width to 100%.

The website I am creating is not published externally. It will be an internal-only website. Here is a screenshot of the view in Internet Explorer.

Create view form
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
A screen shot is not helping us here. We can't see what the underlying html looks like

However, if we look at the screen grab the form is occupying only a 1/3 of the screen - this is probably because it is constrained by its container.

Bootstrap has nothing to do with this - if you put a bootstrap element inside a container that has a constrained width Bootstrap styles can only fill that container.

Without us seeing what is under the hood - cannot give you an answer.

Either post a link to a fiddle or similar or post rendered html for the form so we can see what is going on.
The website I am creating is not published externally
That is why https://jsfiddle.net and https://codepen.io/ exist. So you can create a mockup of the problem that is publicly available.

If you want quick results I would do that - take your rendered form code and place it in a fiddle and try to emulate what you are seeing on your screen then post that link.
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Author

Commented:
You suggested using jsfiddle. I am using MVC which requires the model to present the form. I tried pasting the code from the MVC view into the HTML box and it just shows a white page with the code.

You said that bootstrap has nothing to do with this. If that is the case, then what sets the parameters for the container? All the HTML that renders the page is in the cshtml file. I posted the first part of the code which contains the div class for the first part of the form and form group.

In addition to what is posted in the code I showed above, I also have a default _Layout.cshtml file that is created as part of a new MVC 5 web project.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CRM</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<br />
<div class="container">
<div class="row">
<img src="~/Content/Images/logo.gif" class="center-block img-responsive" />
<br />
<br />
</div>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("CRM", "Index", "Customers", new { area = "" }, new { @class = "navbar-brand" })

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Customers")</li>

                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - </p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Open in new window

Author

Commented:
I took a closer look at the website in Firefox and viewed the page source. It is using site.css and bootstrap.css stylesheets. The site.css has these parameters for the body and body-content.

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

Open in new window

Author

Commented:
Here's the full code from the view source in Firefox if that helps.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - CRM</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<br />
<div class="container">
<div class="row">
<img src="/Content/Images/logo_CMYK.gif" class="center-block img-responsive" />
<br />
<br />
</div>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/Customers">CRM</a>
                
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Customers">Home</a></li>
                    
                    
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        


<h2>Create</h2>


<form action="/Customers/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="zBVvOjv4HPVGeFIY0HcBbJJ38HmTWepLxZmxtNggxgxOsrintSr-o9onsl_S73LlrnrIwb-_MYCNgqS_ziI13dp1bhy2JIAuiUu2A9kvqbg1" />    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        
        <div class="form-group">
            <label class="control-label col-md-2" for="SystemOfRecordId">System of Record ID</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="SystemOfRecordId" name="SystemOfRecordId" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="SystemOfRecordId" data-valmsg-replace="true"></span>
            </div>
        </div>



        <div class="form-group">
            <label class="control-label col-md-2" for="Tin">TIN</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Tin" name="Tin" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Tin" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Customer Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="status_id">Prospect Status</label>
            <div class="col-md-10">
                <select data-val="true" data-val-number="The field Prospect Status must be a number." id="status_id" name="status_id"><option value="">Please Select Prospect Status</option>
<option value="0">Prospective Customer</option>
<option value="1">Existing Customer</option>
<option value="2">Referral – Share</option>
<option value="3">Referral – Do Not Share</option>
</select>
                <span class="field-validation-valid text-danger" data-valmsg-for="status_id" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="ConfidenceRating">Confidence Rating</label>
            <div class="col-md-10">
                <select data-val="true" data-val-number="The field Confidence Rating must be a number." id="ConfidenceRating" name="ConfidenceRating"><option value="">Please Select Confidence Rating</option>
<option value="0"></option>
<option value="1">1 - Very Stable</option>
<option value="2">2 - Stable</option>
<option value="3">3 - At Risk</option>
</select>
                <span class="field-validation-valid" data-valmsg-for="Confidence Rating is required" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="BankOfficer">BankOfficer</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="BankOfficer" name="BankOfficer" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="BankOfficer" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="TrustOfficer">TrustOfficer</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="TrustOfficer" name="TrustOfficer" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="TrustOfficer" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="IsBusinessCustomer">IsBusinessCustomer</label>
            <div class="col-md-10">
                <div class="checkbox">
                    <input class="check-box" data-val="true" data-val-required="The IsBusinessCustomer field is required." id="IsBusinessCustomer" name="IsBusinessCustomer" type="checkbox" value="true" /><input name="IsBusinessCustomer" type="hidden" value="false" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="IsBusinessCustomer" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>
<div>
    <a href="/Customers">Back to List</a>
</div>


        <hr />
        <footer>
            <p>&copy; 2019 - CRM</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>


</body>
</html>

Open in new window

In site.css comment input style. The wizard inserts width style for input, select and textarea.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
. I am using MVC which requires the model to present the form
Just copy out the relevant bits from a View source and you don't need MVC.
Thank you for the view source post - that is helpful.
I have put my version of it here http://www.marcorpsa.com/ee/t3739.html

As you can see with Bootstrap 3.2 only (not your .css files) the form fills the container.

Bootstrap sets the .container class at 1170px
If you want to go full screen use .container-fluid (on all your .container classes - you have a few of them)

However, I cannot replicate the screen shot you posted which means that somewhere you have a style that is constraining the width of the form.
I would do an inspect element on your form moving up the DOM looking at the calculated values to see where the width is being set.

Unless you can provide a link that shows the problem - from my side it seems bootstrap is doing what it is supposed to do.

Author

Commented:
The problem is in the site.css. It sets the textarea to a max-width of 280px. I'm sure there is a reason why Visual Studio creates it that way. It seems bizarre to me.

This is the code in the site.css. I commented it out and the form worked as I expected it to.

input,
select,
textarea {
    max-width: 280px;
}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Did I miss a step - did you post site.css anywhere?
This is the code in the site.css. I commented it out and the form worked as I expected it to.
Don't do that - rather override the style

1. If that file is generated - it will be overwritten and you will lose your comments
2. If that style is required elsewhere in your app you will have introduced a side effect.

Rather implement a targeted style that overrides the one in site.css.

Author

Commented:
Thank you sincerely for your assistance with this project. You suggested inspecting the element. In doing so, I found that the EditorFor form-control was being set to 280px. The site.css is referenced at the top of the code in the output for the "view source" that I provided from Firefox. The site.css had max-width set to 280px so the form was not filling the entire screen. I could set a specific width in the site.css, but I am choosing to just let the bootstrap css do its job. I may make changes in the future, but once I commented out that section of site.css, everything looked good on the form and it maintained its responsive design. I may still do some design tweaks since by default the input fields fill the entire width of the screen. It is much better than what it was before.

You make a good point regarding setting up specific style sheets. However, I want this style to apply to all the pages. I still might create a separate css file to target this style. It just doesn't make sense that Microsoft would by default set the widths to 280px.

It looks like this is a common problem. This stack overflow post explains the same issue. https://stackoverflow.com/questions/4720909/mvc-and-editorfor-width

There is also a blog that references this issue: https://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap

For reference, this is the site.css that was created by Visual Studio 2017 when I set up this project. Those comments in the code are not my own. Those were auto-generated. I commented out lines 19-24 where it sets the max-width to 280px.

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Open in new window

Author

Commented:
Just one more additional comment - after removing that section from site.css, the bootstrap column sizing worked as expected (e.g. col-md-10 filled up the width that it was supposed to on the screen).
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The site.css is referenced at the top of the code in the output for the "view source" that I provided from Firefox.
I understand - and I saw that - but we could not see that file and so could not "debug" the page.
I want this style to apply to all the pages. I still might create a separate css file to target this style. It just doesn't make sense that Microsoft would by default set the widths to 280px.
Even if you want this global - consider this.
Next time you compile your project and site.css is re-generated (assuming that is what happens - I have not used Visual Studio for some time) then any changes you make are going to be overwritten.
Best practice is to always override styles that are part of external resources rather than changing the source file.

Just one more additional comment - after removing that section from site.css, the bootstrap column sizing worked as expected (e.g. col-md-10 filled up the width that it was supposed to on the screen).
No, column sizing was always working - in your case the controls were not sized to fill the columns. It is an important distinction. Bootstrap created a column 5/6 of the screen but the controls were sized smaller than this and so were not expanding.
So not a Bootstrap issue - an issue of MS overriding bootstrap.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial