Table with Html.EditorFor

Question

I am trying to create a form using a table. I have a total of 7 fields. What I am hoping to accomplish is have 3 fields on one row, 3 fields on the second row and the last row would be the last field extended. I tried using colspan however the editorfor box for NextAction is not extending all the way. There is a margin on the right hand side of this field. I've tried creating a CSS class to take away the margin however that did not work as well.

How can I get it so that the NextAction field extends all the way to the last column?

Below I've added my code for the last 2 rows of my table.

            <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.Customer, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Customer, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Customer, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Principal, htmlAttributes: new { @class = "control-label col-md-2" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Principal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Principal, "", new { @class = "text-danger" })
                </td>

                <td>
                    @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Product, "", new { @class = "text-danger" })
                </td>

            </tr>
            <tr>

                <td>
                    @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Status, new SelectList(ViewBag.Status, "Status", "Text"), new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Value, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Value, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Value, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.FollowUpDate, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    <div>
                        <div class="input-group date" data-provide="datepicker">
                            @Html.EditorFor(model => model.FollowUpDate, new { htmlAttributes = new { @class = "form-control" } })
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.NextAction, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td colspan="5">
                    @Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control ", @style = "margin-right: 0 !important;"} })
                    @Html.ValidationMessageFor(model => model.NextAction, "", new { @class = "text-danger" })
                </td>
            </tr>
        </table>

Answer 1

Since you have Bootstrap enabled on your project, use Bootstrap's CSS class w-100 . This class will make an element it is applied to have have 100% width. Here is the updated EditorFor line with that class added:

@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })

If that doesn't work, you likely have something else overriding it. Check your other style sheets and the HTML that is rendered in your browser.