A few days ago, I created an ASP.NET MVC 5 project in
the brand new Visual Studio 2013. I added some model classes and then proceeded to scaffold a controller class and views using
the Entity Framework. Scaffolding Some Views Visual Studio 2013, by default, uses
the Bootstrap 3 responsive CSS framework. Great; after all, we all want our web sites to be responsive and work well on mobile devices. Here’s an example of a scaffolded Create view as shown in Google Chrome browser Looks pretty good. Okay, so let’s increase
the width of
the Title, Description, Address, and Date/Time textboxes. And decrease
the width of the State and MaxActors textbox
controls. Can’t be that hard… Digging Into
the Code Let’s take a look at
the scaffolded Create.cshtml file. Here’s a snippet of code behind
the Create view. Pretty simple stuff. @using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>RandomAct</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description)
@Html.ValidationMessageFor(model => model.Description)
</div>
</div>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
A little more digging and I discover that there are three CSS files of importance in how
the page is rendered: boostrap.css (and its minimized cohort) and site.css as shown below.
The Root of
the Problem
And here’s
the root of
the problem which you’ll find
the following CSS in Site.css:
/* Set width on
the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Yes, Microsoft is for some reason setting
the maximum width of all input, select, and textarea
controls to 280 pixels.
Not sure
the motivation behind this, but until you change this or overrride this by assigning
the form
controls to some other CSS class, your
controls will never be able to be wider than 280px.
The Fix
Okay, so here’s
the deal: I hope to become very competent in all things Bootstrap in
the near future, but I don’t think you should have to become a Bootstrap guru in order to modify some scaffolded control widths. And you don’t. Here is
the solution I came up with:
Find
the aforementioned CSS code in SIte.css and change it to something more tenable. Such as:
/* Set width on
the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 600px;
}
Because
the @Html.EditorFor html helper doesn’t support
the passing of HTML attributes, you will need to repalce any @Html.EditorFor() helpers with @Html.TextboxFor(), @Html.TextAreaFor, @Html.CheckBoxFor, etc. helpers, and then add a custom width attribute to each control you wish to modify. Thus,
the earlier stretch of code might end up looking like this:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Random Act</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Title,
new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Title, new { style = "width: 400px" })
@Html.ValidationMessageFor(model => model.Title)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description,
new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Description, new { style = "width: 400px" })
@Html.ValidationMessageFor(model => model.Description)
</div>
</div>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Resulting Form
Here’s what
the page looks like after
the fix:
Technorati Tags: ASP.NET MVC,ASP.NET MVC 5,Bootstrap
