CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3twitter-bootstrapsimple-form
Grant Sayer
Grant Sayer

Reputation: 2320

Rails: Twitter Bootstrap Buttons when visited get black text color

I have a rails 3.2 app using Twitter Bootstrap via the gem 'twitter-bootstrap-rails'. Additionally the forms are created with the SimpleForm gem For a number of the pages I've used the twitter buttons on the form via

<%= link_to "Back", :back, :class => 'btn btn-warning'%>
<%= form.button :submit, :class => 'btn btn-primary' %>

The buttons are rendered ok. The issue is that after you select one of the buttons, which visits the link, on returning to the page the text is stuck on the greyed out version as shown below for the 'back' button:

twitter buttons

This causes a problem, especially on the buttons styled with 'btn-primary' as the text is hard to read. An example of this is below:

edit button

Wondering what setting needs to change and where. I expected it should be in the bootstrap_and_overrides.css.less file but not sure what setting to try. Tests on @linkColorHover didn't work.

Any thoughts ?

Upvotes: 9

Views: 4985

Answers (5)

Alexander Suraphel
Alexander Suraphel

Reputation: 10613

The best solution I found for this problem is to remove scaffolds.css.scss in the app/assets/stylesheets directory as suggested by @tonymarschall above in the comments.

Upvotes: 10

Rob
Rob

Reputation: 7216

Kind of a combination of a few of the answers, but simply replace:

color: #666;

With:

color: white;

In scaffolds.css.scss

Upvotes: 2

tasos
tasos

Reputation: 392

As an alternative you can use button_to instead of link_to in your templates.

Because this creates a new form, if you want to simulate the link behaviour, you need to use the :method => :get parameter. You can find more info here.

Upvotes: 3

ksol
ksol

Reputation: 12235

You could always style the a.btn items, to remove the decorations on the pseudo classes such as :visited

Upvotes: 5

Agis
Agis

Reputation: 33636

You should use Firebug or Chrome's Developer Tools to find out which CSS property you'd have to override in bootstrap_and_overrides.css.less.

It's kinda hard to tell by looking at images.

Upvotes: 0

Related Questions