How to change MVC 5 @Html.EditorFor width

Question

I am designing an edit form using MVC 5 Razor. I want the input controls to fill the whole blank width as shown in the picture but it is not working. see image here. Page here

I have put controls inside table dimensions. One dimension is for the label and the other dimension is for input editor (HTML Helper).

I have tried to override the form-control width with the following css class but no success:

    .form-control {
    width: 100%!important;
    }

and even made another css class

    .newinputwidth {
    width: 400px!important;
    }

but it does not change the width of input.

The full MVC code is here.

@model test2.Models.CaseReport

<style>
.form-control {
    width: 100%!important;
}
.newinputwidth {
    width: 400px!important;
}
</style>
<h2>Edit</h2>
<div class="container">
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <table id="dt" class="table table-condensed table-responsive table-bordered" width="100%" cellspacing="0">
                <tr>
                    <td>Main Id</td>
                    <td>
                        @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "newinputwidth" } })
                    </td>
                </tr>
                 <tr>
                    <td>Location</td>
                    <td>
                        @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
                    </td>
                </tr>
                <tr>
                    <td>Disease </td>
                    <td>
                        @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } })
                    </td>
                </tr>
            </table>
        </div>
        <div class="row col-lg-12 col-md-12 col-xs-12 text-center">
            <div>
                <div>
                    @Html.Action("_DetailsIndex", new { id = Model.CaseReportId })
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

    </div>
}
</div>

Answer 1

In bootstrap, you put blank controls in a container class and apply custom css on it. That will take care of the width of the blank controls. Now, sometimes even when you set container class's width, it does not mean it is responsive or it really makes controls width so short! To achieve responsive desired behavior readable to users set css for each control and apply @ style="100% !important; min-width:300px;". Here is an example:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{ <div class="container" style="width:40%; margin:6%">
      <h4 style="color:darkorange">Register</h4>
        <div class="row text-center">
            <h5 style="color:tomato">@ViewBag.Message</h5>
        </div>
        @Html.AntiForgeryToken()
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @placeholder = "First Name",  @style = "width:100% !important; min-width:180px;" } })
                    @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                </div>
            </div>
  </div>
    </div>
  }