CODEWITHSUNDEEP
c#cssasp.net-mvctwitter-bootstraptwitter-bootstrap-3
xecollons
xecollons

Reputation: 608

Incorrect aligning of form controls in ASP MVC 5 and Bootstrap

I have been looking for a solution for this, but nothing found so far, and it's making me go crazy.

First of all, I'm new to web development, with ASP MVC, Bootstrap, Ajax, Javascript and so on, so I beg your pardon if there is some atrocious code here.

Let's go for the question:

I have a project with ASP MVC 5 and Bootstrap, with some forms in it. The problem is, using the "form-horizontal" class, I can't align the controls in a good way, one control of a form-group aligns next to the other, but the control that is on the right it's a bit "upped". It's better to show it: Test Form

As you can see, this has been made using the default project of Visual Studio. Maybe the bad alignment it's not shown very well in the textboxes, but in the ValueFor of Field3 it's very clear.

Here is the code used for that form. It's pretty simple:

@model PruebaAuth3.Models.PruebaFormViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

<body>
    <br />
    <div class="panel panel-primary">
    <div class="panel-heading">Panel title</div>
    <div class="panel-body">
        @using (Html.BeginForm("SubmitForm", "PruebaForm", FormMethod.Post))
        {
                <div class="form-horizontal">
                    @Html.HiddenFor(model => model.Id)
                    <div class="form-group">
                        <div class="control-label col-md-2"><b>@Html.LabelFor(model => model.Field1)</b></div>
                        <div class="col-md-10">
                        @Html.EditorFor(model => model.Field1)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="control-label col-md-2">   <b>@Html.LabelFor(model => model.Field2)</b></div>
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Field2)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="control-label col-md-2">   <b>@Html.LabelFor(model => model.Field3)</b></div>
                        <div class="col-md-10">
                            @Html.ValueFor(model => model.Field3)
                    </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Save" class="btn btn-primary" />
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</body>

Any help would be appreciated. Thanks in advance.

Upvotes: 2

Views: 7942

Answers (3)

Shoaib Shakeel
Shoaib Shakeel

Reputation: 1557

label elments have 7px top margin, by default, as compared to input elements created by EditorFor. While ValueFor (by default) just creates a text node in DOM. You just need to apply same margin-top style to ValueFor output or Parent Div.

<div class="form-group">
    <div class="control-label col-md-2">
        <b>@Html.LabelFor(model => model.Field3)</b>
    </div>
    <div class="col-md-10" style="margin-top:7px">
        @Html.ValueFor(model => model.Field3)
    </div>
</div>

Note i would suggest that you create a CSS class for it instead of using style tag here.

Upvotes: 4

Stonck
Stonck

Reputation: 156

Try this

@Html.TextBoxFor(model => model.Field1, new { @class = "form-control" })

Upvotes: 1

rtpHarry
rtpHarry

Reputation: 13135

The problem is that your EditorFor needs to pass in the class form-control to the inputs as you can see from examples on the official docs.

It doesn't look like you have followed the markup suggestions in the docs.

As long as you're using MVC 5.1 each form group should be more like this:

<div class="form-group">
    @Html.LabelFor(model => model.Field1, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Field1, new { htmlAttributes = new { @class = "form-control" } })
    </div>
</div>

Upvotes: 2

Related Questions