CODEWITHSUNDEEP
c#asp.net-mvc-3htmlrazor
Beginner
Beginner

Reputation: 29543

HTML5/razor how to alter length of a input text box

Why has html5 changed so much stuff!

How do i alter the width of the below two text boxes? 

  <div class="editor-field">
          @Html.TextBoxFor(m => m.S1_LandLine)
          @Html.ValidationMessageFor(m => m.S1_LandLine)
  </div>

and

  <input type="text" id="myinput" value="1" class="Q" data-id2="Q" />

and

<select id="S1_TitleID" name="S1_TitleID">
       <option selected="selected" value="1">Mr</option>
       <option value="2">Miss</option>
       <option value="3">Mrs</option>
</select>

Upvotes: 1

Views: 8794

Answers (4)

glamb
glamb

Reputation: 1

I know i am a little off topic, but if you're looking for maxlength attribute :

We are using the MVC pattern : your view should be strongly typed to your model.

View

<div class="editor-label">
    @Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Rating)
    @Html.ValidationMessageFor(model => model.Rating)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Body)
    @Html.ValidationMessageFor(model => model.Body)
</div>

And in the model, we can set defined conditions :

[Required]
[Range(1,10,ErrorMessage="Not in the 1-10 Range"]
public int Rating { get; set; }

[Required]
[StringLength(1024,ErrorMessage="Incorrect format")]
public string Body { get; set; }

Upvotes: 0

TJHeuvel
TJHeuvel

Reputation: 12608

Using CSS:

.editor-field input[type="text"], .editor-field select
{
  width:100px;
}

Upvotes: 2

anothershrubery
anothershrubery

Reputation: 21003

What exactly did HTML5 change?! I am going to assume by length you mean the maxlength, or the number of characters you can input into the text box. I may be wrong but your question is a bit ambiguous.

For the first you can do:

<div class="editor-field">  
    @Html.TextBoxFor(m => m.S1_LandLine, new { maxlength = 10 })  
    @Html.ValidationMessageFor(m => m.S1_LandLine)  
</div>

And the second:

<input type="text" id="myinput" value="1" class="Q" data-id2="Q" maxlength="10" />

If you are not looking the maxlength then what are you looking?

EDIT: Just noticed you say the width, if so follow others advice on here.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

To generate the desired markup:

@Html.TextBoxFor(m => m.S1_LandLine, new { data_id2 = "Q", @class = "Q" })

As far as the length is concerned (whatever that means) you could use CSS to specify the Q rule => nothing really related to ASP.NET MVC nor HTML5.

Upvotes: 0

Related Questions