CODEWITHSUNDEEP
cssasp.net-mvchtmlrazortwitter-bootstrap-3
Vishal
Vishal

Reputation: 2017

Not able to apply allignment for Controls in MVC Razor view using Bootstrap 3

Problem Statement:

In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0

Any help would be appreciated. What inline CSS I should use to align properly??

Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned. enter image description here

Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.

enter image description here

View:

<div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)

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

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </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>

Upvotes: 5

Views: 1723

Answers (4)

Will S
Will S

Reputation: 11

If you want to line up the text and not use a textbox, use the class "form-control-static"

<div class="col-md-10 form-control-static">@Html.DisplayTextFor(model => model.AcquirestatusID)</div>

Upvotes: 1

Rami Sarieddine
Rami Sarieddine

Reputation: 5432

I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.

Upvotes: 1

Vishal
Vishal

Reputation: 2017

I solved my problem using readonly attribute to my Textboxfor.

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

After applying above line of code my edit view looks:

enter image description here

Upvotes: 4

csoueidi
csoueidi

Reputation: 418

It might be happening due to the style.css which is by default in your project.

Remove style.css from the project

Note: you might only need some of the validation classes inside it

Upvotes: 2

Related Questions