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

Since you're using Bootstrap, I would suggest abandoning the table completely for this type of layout.

You should be able to achieve this with the grid system using a horizontal form: http://getbootstrap.com/css/#forms-horizontal

<div class="row form-horizontal">
    <div class="col-md-12">
        <div class="form-group">
            @Html.LabelFor(model => model.CaseReportId, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ReportDate, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
    </div>
</div>

If you really want to use a table, I noticed you have a table-responsive class on the table element. This is meant to be used on a parent (wrapper) div. http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>