Change text box size in the view

Question

I've create MVC5 App which generate from my model by scaffold the view and controller currently the default size of the text box are 18 character and I want it to be 5 ,how should I reduce the default size of the text box?

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

I've tried without success with

  @Html.EditorFor(model => model.Nun, new { @style = "width: 100px;" })

by size, do you mean the actual width of the box, or the number of characters which can be entered? — wf4, Apr 07 '14 at 08:46
Is the css class col-md-10 determining the size of the textbox at all? — markpsmith, Apr 07 '14 at 09:06

wf4 · Answer 1 · 2014-04-07T10:10:20.900

The reason that you can not do

@Html.EditorFor(model => model.Nun, new { style = "width: 100px;" })

is because EditorFor could contain more than one object. As a result, you would be applying properties to things which may be incorrect in the case that you may be setting an ID as well as a style.

So, there are a couple of ways in which you can style the boxes.

This CSS will do it for you: (you can use just 1 line or all of them which apply)

.col-md-10 input                 { width:50px }     /* <input> */    
.col-md-10 input[type=text]      { width:50px }     /* <input type="text"> */
.col-md-10 input[type=password]  { width:50px }     /* <input type="password"> */
.col-md-10 textarea              { width:50px }     /* <textarea> */

So for example, any <input type="text"> which is a child element of .col-md-10 will be set to 50px wide.

or you can instead use TextBoxFor which will allow you to add an inline style:

@Html.TextBoxFor(model => model.Nun, new { style = "width: 50px;" })

Ehsan Sajjad · Answer 2 · 2014-04-07T10:13:20.930

0

In model do like this for Nun property:

[StringLength(6)]
public string Nun {get;set;}

if you want to change width then:

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

edited Apr 07 '14 at 10:13

answered Apr 07 '14 at 09:18

Ehsan Sajjad

61,834
16
105
160

Thanks but this is restrict the number of the characters you can put in the text box and not the size of it... – 07_05_GuyT Apr 07 '14 at 09:22
you doint want to restrict user on 6 characters? – Ehsan Sajjad Apr 07 '14 at 10:10
then see the updated version of answer, hope it helps – Ehsan Sajjad Apr 07 '14 at 10:13

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

Use TextBoxFor

@Html.TextBoxFor(model => model.Nun, new { @style = "width: 100px;" })

Check this LINK . If you dont want to use TextBoxFor instead of EditorFor

edited May 23 '17 at 10:33

Community

1
1

answered Apr 07 '14 at 09:32

Nitin Varpe

10,450
6
36
60

Change text box size in the view

3 Answers3