-1

If have my input like this

<input type="text" class="long_form_fields" id="pickup_address" name="pickup_address" placeholder="Address" autocomplete="off">

Very bottom of my Bootstrap CSS file is this

#pickup_address.long_form_fields {
  width: 420px
}

Also tried these

.long_form_fields {
  width: 420px
}

input.long_form_fields {
  width: 420px
}

Nothing will change the input field width. I looked in the Chrome developer tools and my CSS class style of long_form_fields but it never shows up?

======= UPDATE ========

In Chrome Dev Tools, if I click the + button and add this then it works.

input#pickup_address {
  width: 420px;
}
m4n0
  • 29,823
  • 27
  • 76
  • 89
jdog
  • 10,351
  • 29
  • 90
  • 165
  • Mind giving a fiddle/snippet example? [Seems to work fine in a simple example](http://jsfiddle.net/xs86kd4v/) – Spencer Wieczorek Nov 17 '15 at 03:39
  • semicolon has missing with your styles. Please add `;`along with your all styles. – Fazil Abdulkhadar Nov 17 '15 at 03:40
  • @FazilAbdulkhadar Why would that help? It's not necessary if there is only a single style. – Spencer Wieczorek Nov 17 '15 at 03:42
  • 2
    Please try `Ctrl + F5` to clear browser cache. I believe that your page is still loading the old css instead of new one. – choz Nov 17 '15 at 03:43
  • Actually i guess there is no issue with this code [Demo](http://jsfiddle.net/divy3993/t9rvyod2/), i guess you might be **overriding `width`** with selector `input` or someother way in your CSS. – divy3993 Nov 17 '15 at 03:43
  • *Note:* While it's doesn't seem like you are, if you are using bootstrap when defining your `input`you generally use classes to define certain widths, but you can get around that ([see this question](http://stackoverflow.com/questions/18539711/input-widths-on-bootstrap-3)) – Spencer Wieczorek Nov 17 '15 at 03:45
  • Updated above. If I force the style via chrom (by adding it) then it works? Its like chrome is not grabbing the CSS changes? – jdog Nov 17 '15 at 03:52
  • @jdog what version of bootstrap? can you repro this on [jsfiddle](https://jsfiddle.net/DTcHh/)? – justinw Nov 17 '15 at 03:59
  • Your selector is less specific than Bootstrap's, most likely. Hence, why `input#someid` works; it's more specific. – Tieson T. Nov 17 '15 at 03:59

1 Answers1

0

Sort of found the issue. There appears to be be 3 boostrap CSS files in this project.

boostrap-editable.css boostrap-responsive.min.css boostrap.min.css

I put the above code in and it works now. Not sure why there are 3 css files or which one should be edited.

jdog
  • 10,351
  • 29
  • 90
  • 165
  • 1
    You should've declared your own style after those 3 styles or appends it in the very last css in your page. But still, you have to know about precedence or specificity in css in order for your style to be applied since bootstrap is a big chunk of css selectors. – choz Nov 17 '15 at 04:12
  • 1
    bootstrap-responsive indicates that you're using version 2.3 or older. The editable CSS file is for a plugin (it's not part of the Bootstrap distribution). You should order then as bootstrap.min.css, bootstrap.responsive.min.css, bootstrap-editable.css. This is covered in the [documentation](http://getbootstrap.com/2.3.2/getting-started.html), BTW. – Tieson T. Nov 17 '15 at 05:01