How to Set a Larger Size for a TextBoxFor

Question

How to Set a Larger Size for a TextBoxFor

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

2

I am using the form-control class of Boostrap, and would like to have a TextBoxFor with a larger size, how can I do this?

<div class="form-horizontal">
<div class="row">
    <div class="form-group">
        @Html.Label("Titulo do E-mail:", new { @class = "col-sm-4 control-label" })
        <div class="col-md-6">
            @Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.strTituloEmail)
        </div>
    </div>
</div>

asp.net-mvc

asked by anonymous 10.03.2015 / 19:36

3 answers

2

You can use HtmlAtributtes , and use the html tags inside your textBox.

In your specific case it would look like this:

  @Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control", style = "width:250px; height: 30px;"})

This way you can change height and width of TextBox by changing values that are in width and height .

You can check usage in this example: dotNetFiddle

10.03.2015 / 21:43

1

Just add the class and size in HTMLAttributes :

Html.TextBoxFor(model => model.TeuCampo, new { @class = "form-control", style="width:50px;"}

10.03.2015 / 19:43

Var within FOR when it starts at 0 (zero) should Count be Count-1? How to save space in audit log?

score 3 · Accepted Answer

You can use HtmlAttributes from the asp.net HtmlHelper itself MVC.

You can simply put a style , set width to the desired size:

@Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control form-control-custom", @style="width:1000px;"})

HTML result:

<input class="form-control form-control-custom" id="strTituloEmail" name="strTituloEmail" style="width:1000px;" type="text" value="">

Or by creating a% custom% for your desired style, for example:

<style>
    .form-control-custom {
        width: 1000px;
    }
</style>

And then use your custom%% wrapper to class of the bootstrap. (Just do not forget that your style should always be loaded later than the bootstrap, to overwrite it)

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

HTML result:

<input class="form-control form-control-custom" id="strTituloEmail" name="strTituloEmail" type="text" value="">

Use the CSS hierarchy to your advantage, remember what the acronym stands for CSS (Cascading Style Sheets) , use C.