1

I'm having what I assume is a simple syntax problem in haml using ruby on rails and bootstrap.

Currently whenever I want to use a link_to inside a bootstrap element such as a button or a navbar li, the styling of the link_to overrides the one used by the element itself. It results in blue underligned links, which severely clashes with some layouts.

Things like :

%ul.nav.navbar-nav
 %li
  = link_to t(:button_root), '/'
 %li
  = link_to t(:button_something), something_path

or

.row
  = link_to something_path, class: 'btn btn-default' do
   = t(:button_something)

will produce this behavior. I've come up with a few impractical solutions like overriding the css directly in application.css but this is hardly something I'd like to have to do everytime. What am I doing wrong in this syntax ?

EDIT :

The inclusion of bootstrap is done through importing through application.css.scss

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

The rest of the stylesheets are empty apart from Active Admin's

@import "active_admin/mixins";
@import "active_admin/base";

EDIT :

The inclusion of active admin's css in the application stylesheet is the cause of the issue. With a clearer idea of the cause of the issue I could find this answer that explains the issue.

https://stackoverflow.com/a/11745446/5194491

I opted to displace active admin's css sheet in the vendor folder as it seemed to me the more sensible choice.

Community
  • 1
  • 1
Nano
  • 13
  • 3

2 Answers2

0

You're doing nothin wrong with the link_to syntax.
link_to only renders a <a href></a> element, it does no styling at all (unless you provide an explicite style attribute).
The appearence is totaly defined by your CSS.

So use your browser's developer tools to check the CSS styles, that are used on your link and show the resuts here for advise.

Maybe Active Admin styles are overriding the bootstrap styles.

Martin M
  • 8,430
  • 2
  • 35
  • 53
  • It was indeed active admin that was styling those links. Now I'll move on to finding a way to stop it. – Nano Aug 05 '15 at 15:08
0

The application.css (or .sass or .scss for whatever your file extension is) is used as a master sheet, and if I am not mistaken, is typically loaded last and any of the imports you include on the application.css file will override any of the stylesheets for different controllers (such as post.css.scss would be overridden by application.css, for e.g.).

Matt Boldt's article has a great description of that and how to understand it.

Edit:

I wanted to elaborate on this a bit more, but I was being called into a meeting so I'll do that now since it's over.

In your application.css file, at the very bottom of the list of require lines you should see:

...
*= require_tree .        //The "tree" of all other stylesheets gets compiled first.
*= require_self          //Then this page (the application.css page) gets loaded after the tree
*/
@import stuff...         //Then this overrides all that stuff

I'm not sure if possibly switching the require_tree . and require_self lines would do the trick, but it doesn't feel like good practice, and I'm typically not comfortable modifying certain hierarchies in Rails apps, so although that might work, I personally don't suggest it.

I usually write my CSS in the application.css. Even though I am told this is bad practice, it has worked every time for me and never really give me any complications and has actually increased my productivity for a few reasons:

  • All my CSS is in one file, not scattered over several which may cause styling inconsistencies.
  • I don't need to forcefully override Bootstrap styling by using !important everywhere.

And that's pretty much the only two reasons I need. Honestly, use whatever works best for you that doesn't make future development on it a pain.

Graham S.
  • 1,480
  • 1
  • 20
  • 28