I can't adjust the width of my html.EditorFor box within the helper method

Question

VS2013, MVC5, Razor, VB

I'm not yet that fluent with CSS files, so maybe this is my chance to learn, but I also thought that I should be able to add something to the html.EditorFor command to make the displayed box wider.

This is my original code from the scaffold:

@Html.EditorFor(Function(model) model.Body, New With { .htmlAttributes = New With { .class = "form-control" } })

When I added .rows as below (I have "DataType(DataType.MultilineText)" decorating the class property 'Body'):

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20"}})

that worked great to easily give me more rows. But adding .cols doesn't seem to work:

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20", .cols = "80"}})

In fact, even if I set .cols = "10", I see no change in the view. I checked the source in the browser, and the cols attribute is present. I changed over to html.TextBoxFor to play around and found I could adjust the width of the box smaller, but there is a maximum width in play that I couldn't exceed. I didn't like using .TextBoxFor because it doesn't display as nice as the original.

Since the MVC template makes extensive use of the bootstrap CSS files, I was a little reluctant to do much with them, but maybe some of the answers will be to direct me in making such changes safely, or according to best practice.

I also have the question of why I can't make a local style change in the html.EditorFor command. I thought the principle was the closer to the displayed element, the higher priority the CSS would have.

Added re Chris Pratt's response: So this is the standard Razor code created by the scaffold. I only included a single element of my view. I saw how changing the class inside the elements had impact, but I ended up changing the Label element as well as the .EditorFor element, plus, I never got the .EditorFor element to get wider.

@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@Html.Hidden("ChannelItemID", ViewData("ChannelItemID"))

@<div class="form-horizontal">
  <hr />

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

I wondered if you might offer what I should be changing to get the 100% width while still properly using Bootstrap.

Answer 1

Two things. First, cols only affects the width of a textarea if no explicit width is set. The default Site.css file indeed sets a max width on inputs, textareas and selects:

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

So, no matter how many columns you add, the textarea will never expand beyond 280px.

Second, if you're going to use Bootstrap, then this is not how you should control the width anyways. Your inputs should be given the class form-control, which will actually cause them to expand to 100% width. You limit this, then, by wrapping them in the responsive grid classes bootstrap provides. For example:

<div class="col-md-4">
    <textarea class="form-control"></textarea>
</div>