CODEWITHSUNDEEP
c#asp.nettwitter-bootstrap
jason
jason

Reputation: 7164

Change TextBox Size on asp.net MVC5

I have this input on my View : 

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

I want to increase the text box width. I have changed col-md-x value but nothing changed. How can I change the textbox width for this part of code? Thanks.

Upvotes: 1

Views: 4881

Answers (4)

Scanner
Scanner

Reputation: 627

You could use a textbox and use the style attribute along with the new keyword as the example shows below

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

It can also be used for LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" })

Upvotes: 1

AlexB
AlexB

Reputation: 7416

col-md-x is the space allocated to the container of your textbox. You can't increase the textbox's size by increasing the class col-md-x, but only the container's size.

If you are using ASP.NET MVC 5.1, you can use :

@Html.EditorFor(model => model.Detail, new { htmlAttributes = new { @class = "largeTextBox" } })

And in your .css

.largeTextBox {
    50px;
}


If you are using an older version of ASP.NET MVC, you should use @Html.TextBoxFor instead of @Html.EditorFor. This supports HTML attributes.

@Html.EditorFor(model => model.Detail, new { @class = "largeTextBox" }, })


More information, see the What's New section

Upvotes: 2

Kami
Kami

Reputation: 19447

You can apply the various col- classes as needed rather than creating a custom class. Using these will ensure the site remains responsive - see http://getbootstrap.com/css/#forms-control-sizes

You can specify the class by adding

new { @class = "col-md-3"}

which results in

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

Upvotes: 2

Tushar Gupta
Tushar Gupta

Reputation: 15933

You can pass an object of HtmlAttributes with the TextBox using new Keyword as 

@Html.EditorFor(model => model.Detail, new { @class = "widthNew" });

and Now your css as 

.widthNew{
    100px;
}

Upvotes: 1

Related Questions