0

I have a relatively vanilla Rails application with the bootstrap-sass gem providing Twitter Bootstrap awesomeness.

Problem is with my buttons. I'm getting blue text and underlined text on hover and not sure why or how to get rid of it. I'm wondering if it's because these are link tags and not submit tags?!? Regardless, how to make them appear as true buttons?

enter image description here

I've removed everything from my stylesheets except @import "bootstrap";

They should appear like this.

Any ideas? Here's the view code but it buttons appear the same way in other views...grouped and on their own. 

%table.table.table-hover
  %thead
    %tr
      %th Title
      %th Filename
      %th

  %tbody
    - @reports.each do |report|
      %tr
        %td= report.title
        %td= report.filename
        %td
          .btn-group
            %button.btn= link_to 'Show', report
            %button.btn= link_to 'Edit', edit_report_path(report)
            %button.btn= link_to 'Destroy', report, method: :delete, data: { confirm: 'Are you sure?' }
Meltemi
  • 37,979
  • 50
  • 195
  • 293

5 Answers5

1

I'm guessing it has to do with the bootstrap-sass gem. I have never used that one, but I have used bootstrap-rails (which uses less).

You can certainly override the active and/or hover state with :active or :hover on your selectors in any css/sass file that gets evaluated after bootstrap.

athal7
  • 11
  • 1
1

I don't know the solution, but I suggest you to use Inspect Elements in Firefox or Chrome to find your problem!

duykhoa
  • 2,227
  • 1
  • 25
  • 43
0

Buttons with the class btn in bootstrap do not use text-decoration: underline. This might be an issue if you aren't including the reset.css thats included in bootstrap which is now really a browser normalize then a reset. But I believe the un-styling of basic anchor tags is being done there.

Mark
  • 5,680
  • 2
  • 25
  • 26
  • Yeah, this is what I thought and why I'm confused. My only css directive is `@import "bootstrap";`. And from [here](https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/_bootstrap.scss) we can see that `reset.css` should be included. So, where are those underlines coming from? Is it because these buttons are actually `href`s? – Meltemi Sep 19 '12 at 06:05
  • 1
    What do you see when you use the browser web inspector? (Chrome, Safari, Firebug). It should give you all the CSS properties and where they're being set. Should be pretty easy to track down that way. If the underline is coming form the browser useragent then its not being normalized as expected in bootstrap. – Mark Sep 19 '12 at 14:33
  • I suspect it is a bug in v2.1.0 (assuming it's not normal behavior?!?) of `bootstrap-sass`. their `.btn` class is not overriding `a`'s `color` and `a:hover`'s `text-decoration`. You can [view the scss here](https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_buttons.scss) – Meltemi Sep 19 '12 at 16:06
  • @Meltemi you should see `a { color: #0088cc; text-decoration: none; } a:hover { color: #005580; text-decoration: underline; }` in the reset.css and `text-decoration: none;` for .btn:hover – Mark Sep 19 '12 at 16:16
  • well, yes, sort of, except that's in [scaffolding.css](https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_scaffolding.scss), which loads immediately after reset.css but nowhere (reset.scss, scaffolding.scss, or buttons.scss) do I see the `.btn:hover { text-decoration: none; }` override. Guessing it's a bug in the conversion to **sass**?!? – Meltemi Sep 19 '12 at 17:40
  • 1
    Sounds like it, I just checked bootstrap on github and its definitely in buttons.less. Sounds like something got skipped for the sass gem conversion. – Mark Sep 19 '12 at 17:42
  • crap...i just double-checked and, low and behold, it's in `buttons.scss` in same place it is in `buttons.less`. so i don't know what the problem is. anyway, i've overridden it in my custom.css. so 'nuff for now. thx for your help. – Meltemi Sep 19 '12 at 17:46
0

i think that you still have the scaffold.css that the scaffold comand generates.

Rodrigo Zurek
  • 4,555
  • 7
  • 33
  • 45
-1

Have you considered using button_to?

%button.btn= button_to 'Show', report, method: :get

Reference, (button syntax) Button_to uses POST Link_to uses GET, why? ROR

Community
  • 1
  • 1
RyanB
  • 707
  • 1
  • 5
  • 18