9

Ho un'applicazione di rails 3.2 che utilizza Twitter Bootstrap tramite la gemma 'twitter-bootstrap-rails'. Inoltre, le forme vengono creati con il SimpleForm gioiello per un certo numero di pagine che ho usato i pulsanti Twitter il modulo tramiteRails: i pulsanti Bootstrap di Twitter quando visitati ricevono il colore del testo nero

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

I pulsanti sono resi ok. Il problema è che dopo aver selezionato uno dei pulsanti, che visita il link, tornando alla pagina il testo è bloccato sulla versione in grigio, come mostrato di seguito per il pulsante 'indietro':

twitter buttons

Ciò causa un problema, in particolare sui pulsanti con stile 'btn-primary' in quanto il testo è difficile da leggere. Un esempio di questo è al di sotto:

edit button

Chiedendosi cosa impostazione deve cambiare e dove. Mi aspettavo che dovrebbe essere nel file bootstrap_and_overrides.css.less ma non sono sicuro quale impostazione provare. I test su @linkColorHover non hanno funzionato.

Qualche idea?

+3

Forse avete ulteriori CS in la tua applicazione. ha avuto lo stesso problema con asset/stylesheets/scaffolds.css.scss generati automaticamente dallo scaffolding. – tonymarschall

+0

Ho un sacco di file CSS SASS generati, ma hanno solo commenti in loro. Hai avuto variabili nei fogli di stile che hai generato tramite lo scaffolding? –

risposta

5

Si può sempre lo stile dei a.btn elementi, di rimuovere le decorazioni sulle classi pseudo come :visited

+2

Questa era la soluzione per sovrascrivere e rimuovere le pseudo classi come suggerito. Quindi nel file app/assets/stylesheets/bootstrap_and_overrides.css.less ho semplicemente aggiunto: –

+1

@GrantSayer ha aggiunto cosa? – KingPong

+2

FWIW, ho avuto questo problema e avevo solo bisogno di rimuovere il 'scaffolds.css.scss' che il generatore di scaffold di Rails aveva aggiunto. http://stackoverflow.com/questions/10507777/twitter-bootstrap-displays-button-with-greyed-text – KingPong

0

Dovresti utilizzare Firebug o gli Strumenti per sviluppatori di Chrome per scoprire quale proprietà CSS dovresti sovrascrivere in bootstrap_and_overrides.css.less.

È piuttosto difficile da dire guardando le immagini.

+0

Grazie - Ho provato quello che mi dà la classe a.btn.btn-primary. Non sono sicuro di cosa fare dopo e stava cercando di utilizzare le variabili LESS come un modo per gestirlo. –

+0

Dandoci un link per vedere il problema dal vivo sarebbe di aiuto. – Agis

+0

Il problema è che si tratta di un sito interno, ma vedrò se riesco a estrarre lo snippet e pubblicare una piccola app sul sito pubblico –

3

In alternativa è possibile utilizzare button_to invece di link_to nei vostri modelli.

Poiché questo crea un nuovo modulo, se si desidera simulare il comportamento del collegamento, è necessario utilizzare il parametro :method => :get. Puoi trovare maggiori informazioni here.

9

La soluzione migliore che ho trovato per questo problema è rimuovere scaffolds.css.scss nella directory app/assets/stylesheets come suggerito da @tonymarschall sopra nei commenti.

2

Tipo di una combinazione di alcune delle risposte, ma semplicemente sostituire:

color: #666; 

Con:

color: white; 

In scaffolds.css.scss

Problemi correlati