Html elements unexpected behaviour in layout

Question

I have an issue with the layout of some html elements. I have a form which i am changing into a tabbed display in order to split it up and make it more usable. The existing form looks like this:

However, when i use the same code inside of a tab, the result is as below:

As i stated, the code for it is exactly the same as below:

       <div class="col-md-12" style="display:block;">
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <span id="custSpan" style="font-size:14px;">
                        @Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
                        @Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
                    </span>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>
        </div>      

It appears to be certain elements affecting the layout. So far i have noticed it on both Html.DisplayFor() and Html.EnumDropDownListFor() (an extension of standard DropDownListFor(). It appears to indent the elements on the next line for some reason.

Can anybody help with this?

Many thanks :)

Answer 1

Try this,

<div class="col-md-12" style="display:block;">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <span id="custSpan" style="font-size:14px;">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
                    @Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
                </span>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { @class = "form-control" })
            </div>
        </div>
    </div>      
</div>