0

I'm developing a form in ruby on rails and in that form I'm using a slider (http://seiyria.github.io/bootstrap-slider/).

The problem is that I have this element.style that overwrites my css like this:

For stored field: enter image description here

When I add a new field dynamically: enter image description here

What is this element.style?

Why this element.style overwrites the width?

This element.style width has the value 0px in the first case and 152px in the second, and I have no ideia why.

Any help?

Mario
  • 1,213
  • 2
  • 12
  • 37
  • 3
    You should read about [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). The style attribute was very likely added by the javascript widget. You may only override the style attribute with the unbeloved [`!important` rule](http://www.w3.org/TR/CSS2/cascade.html#important-rules) – Nico O Feb 24 '15 at 19:20

1 Answers1

1

Add !important to the rule you don't want overridden. E.g. .slider.slider-horizontal {width: 210px}

(using !important is often frowned on, because it can initially enable poorly-structured CSS, and then go on to make your styles extra messy as you start having to use more !important's to override earlier !important's, but there are definitely times when you just have to use it)

henry
  • 4,244
  • 2
  • 26
  • 37
  • 1
    see also http://stackoverflow.com/questions/7369216/how-do-you-read-important-in-css, http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css, http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css, http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css via @cody gray's comment on http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean – henry Feb 24 '15 at 19:47