Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap input 100% width not working

I'm building a test project just to get myself a bit more familiar with Bootstrap but i've run into a problem with input sizes.

I've placed a simple text input object inside a div tag and the width of this object is automatically set to 100% width. However, the div has been set to show as either half or full screen width (depending on browser size), but no matter what the width of the text box will not go above about 280px. It will happily go smaller than that, but never wider.

I've checked and can confirm that the parent object of this box is the right width, but for some reason the box is refusing to fill it. Does anyone know why this might be happening? The code i'm using is below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="txt_Address1">Address 1</label>
      <input type="text" class="form-control" id="txt_Address1" />
    </div>
  </div>
</div>

Thanks

like image 488
James Peel Avatar asked Jan 05 '23 22:01

James Peel


1 Answers

I ran into the same problem, I used IE's Developer Tools and the site.css had this:

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

Once removed it went 100%. For me, Visual Studio create the web site project and puts this in Site.css by default.

like image 112
Dan Kasperski Avatar answered Jan 17 '23 01:01

Dan Kasperski