CODEWITHSUNDEEP
c#htmlasp.netasp.net-mvctwitter-bootstrap
den
den

Reputation: 709

increase text box size bootstrap (ASP.NET MVC)

Is there a way to increase the size (length) of textboxes in a horizontal form?

<div class="form-horizontal">
    <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="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</div>

I have tried changing the col-md-* classes but it hasn't worked.

Upvotes: 14

Views: 33398

Answers (10)

Piotr New
Piotr New

Reputation: 1

The BEST SOLUTION

in MVC C# project go to: Content folder > site.css

And change max-width in css style for input select textarea

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

**IT WILL WORK **

Upvotes: 0

paulyb
paulyb

Reputation: 337

As someone mentioned, put the size on the textbox input itself. No need to create a new class to handle the width.

<div class="col-md-10">
...
   @Html.TextBoxFor(model => model.Name, new { @class = "form-control col-md-10" })
...
</div>

Upvotes: 0

Anish Kumar
Anish Kumar

Reputation: 276

usually your tag has a max-width field set. If you change it as

text {
    max-width: 100%;
    width: 100%;
}

then you can achieve the full available width. If you are making this for multiple device resolutions, then it would be better to use percentage width rather than using the fixed width in px. Hope this helps you.

Upvotes: 3

Steve Drake
Steve Drake

Reputation: 2048

I allways try to stay away from changing the size, I let things fill the space and use the Grid System.

This helps it work on all screen sizes.

Thanks

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2">Wide</label>
    <div class="col-md-10">
      <input class="**form-control**"  type="TextBox"/>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2">Not as Wide</label>
    <div class="col-md-8">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Narrow</label>
    <div class="col-md-6">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Create" class="btn btn-default" />
    </div>
  </div>
</div>

Upvotes: 0

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: 0

Rafael A. M. S.
Rafael A. M. S.

Reputation: 637

Use the HTML INPUT "Size" property.

Example:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" })
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" })

Upvotes: 1

den
den

Reputation: 709

All answers were helpful.

My sollution was to change the default max-width in my css cause it was restricting the size

input, select, textarea {
    max-width: 500px;
}

Then changing the col-md-* class worked fine.

thanks

Upvotes: 10

ryanulit
ryanulit

Reputation: 5001

An alternative way to do this is to just change the col-md-x class on the div that wraps your textbox and validation message to your desired width.

For example, change this:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

to this:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

And now your textbox will be the 5 column width instead of 10. This requires no extra classes and an added bonus is that if you have a longer validation message, it will wrap within the same space as your textbox.

Upvotes: 6

DavidG
DavidG

Reputation: 119146

In Bootstrap 3, the form-control class sets input elements to be 100% of the container.

Alternatively you can manually apply your own style:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

With CSS like this:

input.wide-control {
    width: 300px;
}

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16743

I'd add a class to your textbox:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Then style it in your CSS:

.long-textbox{
    width:300px;
}

You can use the size attribute, but I feel this is more of a stylistic thing and should be managed in CSS.

Upvotes: 3

Related Questions