0

I have a new rails project, and it is using the following gem:

gem 'bootstrap-sass'

I am using the horizontal-form CSS class - which has by default:

text-align:right; as part of .horizontal-form

I want to override this so that all labels have text-align:left;

In my rails project, under stylesheets I have the following:

1st_load_framework.scss

Which has :

// import the CSS framework

@import "bootstrap-sprockets";
@import "bootstrap";

...bunch of css classes and @variables. 

//I have tried adding:

.horizontal-form{ text-align:left; } into this file however, it is overriding by the generated sass CSS.

application.scss

Which has :

    /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
@import "bootstrap-sprockets";
@import "bootstrap";
*= require_tree .
*= require_self
 */



.sign-up{
    background-color:#95ccfb;
}

.log-in{
    background-color:#75d86a;
}


.horizontal-form{ text-align:left !important; }

I have also tried adding :

 .horizontal-form{ text-align:left; }

to the bottom of application.scss to no avail.

How can I make an override like this? I don't believe this particular class has a sass variable, so I am looking for a normal CSS override here - something scalable for the rest of my project in rails would be great.

Using Rails 5.1.1, bootstrap 3

Please help!

RenegadeAndy
  • 5,440
  • 18
  • 70
  • 130

1 Answers1

1

Since you're overriding the bootstrap setting I'm guessing that the CSS is compiling your change above where it's declared by bootstrap CSS. And since it's lower in the cascade it's being given priority. I would try to make it read like this:

.horizontal-form{ text-align:left !important; }

That should override any prior definitions of the class. Use it sparingly though as !important can cause some issues if overused.

Edit

Rearrange your asset pipeline as such: 

*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "1st_load_framework";

The asset pipeline is loaded from top to bottom as well, so load your custom CSS after Bootstrap.

Stephen W
  • 244
  • 2
  • 7
  • My concern about this is I may end up using that quite a lot - and hoped there would be a more scalable way to make such overrides? – RenegadeAndy Jun 08 '17 at 05:00
  • Additionally - this actually doesn't solve the problem - the !important does not override the class. – RenegadeAndy Jun 08 '17 at 05:04
  • It should help if used sparingly. see: https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean – Stephen W Jun 08 '17 at 05:09
  • Well I hear what you are saying - but it is not working. The generated css still has this rule *under* the rule which seems to be in a generated css file. – RenegadeAndy Jun 08 '17 at 05:18
  • Right, but by using !important it should override any rules of specificity and make it focus on that declaration above all. If it's not reading that, it appears to be an issue of the asset pipeline reading your css declaration. Is it still defined in the application.scss? – Stephen W Jun 08 '17 at 05:25
  • I have updated my appliction.scss as you have suggested - and the behaviour is the same. Please see my original updated post to see my new version of the applicaton.scss – RenegadeAndy Jun 08 '17 at 05:41
  • I realized right after I sent that and just made an edit. I would suggest importing each scss file as I did above and that should help. Notice that I removed tree and moved the imports outside of the commented portion. Sorry for the mixup on the last edit – Stephen W Jun 08 '17 at 05:58
  • I'm guessing I also make a change to the 1st_load_framework.scss to remove the additional @imports of bootstrap and sprockets? – RenegadeAndy Jun 08 '17 at 06:00
  • yup. Only need to import that once. – Stephen W Jun 08 '17 at 06:10
  • What tells rails to load in this 1st_load_framework.scss file? Is it the require tree line which we are removing? – RenegadeAndy Jun 08 '17 at 06:12
  • Sass is telling it to load that file by using the @import call and that's why you got rid of the tree portion. By using this method you can control order of load, but you have to import each file. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import – Stephen W Jun 08 '17 at 06:16