0

I want a 0 width input that expands into view, but it seems like Bootstrap's styling is not letting me do this without !important. But when I do mark it !important, I cannot seem to make it expand with jQuery's .animate({width: "170px"}, 200).

Perhaps another alternative to make the box expand into view?

pavel
  • 26,538
  • 10
  • 45
  • 61
Antrikshy
  • 2,918
  • 4
  • 31
  • 65
  • javascript sets inline styles, `!important` overrides inline styles, that's why that wont work. Set the styles inline instead on the input. – adeneo Feb 18 '15 at 06:44
  • Use stronger/more specific selector than Bootstrap uses. – pavel Feb 18 '15 at 06:44
  • Oh yeah, @panther's solution is perfect! I am relatively new to web design and I didn't think of this. You can post it as an answer and I can mark it as correct if you wish. – Antrikshy Feb 18 '15 at 06:47
  • "!important" as the name suggests overrides all other styles and should be used very carefully else you could have unexpected results as you are having... Perhaps post a fiddle, but try adding another class to that element and then edit that class in animate – EaziLuizi Feb 18 '15 at 06:47
  • Btw you can remove `!important` before animating. – iamawebgeek Feb 18 '15 at 06:49
  • How do I change `!important` from jQuery? – Antrikshy Feb 18 '15 at 06:50
  • @Antrikshy: I posted there as an answer, added there example. It's better and clearer solution than using `important`, forget on it. – pavel Feb 18 '15 at 06:54
  • I agree. Can't believe I didn't think of it. I'm still curious how I can toggle `!important` from JavaScript. – Antrikshy Feb 18 '15 at 06:55
  • @Antrikshy: as I know jQuery (it's just a JavaScript), it's not possible to change rules which are written in CSS file. JavaScript can't change CSS files content. – pavel Feb 18 '15 at 06:58
  • @Antrikshy see here: http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css – iamawebgeek Feb 18 '15 at 07:01

1 Answers1

0

Use stronger/more specific selector than Bootstrap uses.

Bootstrap uses a lot of classes in their CSS, so stronger selector will be each one with ID. eg. #content .col-md-6 .col-md-4 is stronger than .col-md-6 .col-md-4 etc.

pavel
  • 26,538
  • 10
  • 45
  • 61