Come selezionare2 per lavorare con l'amministratore attivo

Question

Sto lavorando con un'app con Active Admin e avevo bisogno di selezionare più valori da un input selezionato, ho aggiunto la gemma Select2 che aggiunge tutti i relativi JS e CSS senza problemi, ma per qualche ragione le caselle di selezione sembrano cambiare leggermente il loro aspetto ma non l'apparenza di Select2, dopo l'ispezione il JS non sembra che abbia aggiunto tutte le classi corrette ... qualche idea?

Ecco il mio codice:

active_admin.css.scss

//= require select2 
@import "active_admin/mixins"; 
@import "active_admin/base"; 

active_admin.js

//= require select2 
//= require active_admin/base 
$(".select2able").select2({ 
placeholder: "Select a Partner" 
}); 

forma activeadmin

f.input :sponsors, as: :select, collection: Sponsor.all, input_html: {class: 'select2able'} 

Answer 1

problema risolto, l'uso prescelto js invece di se lect2, funziona allo stesso modo di select2 ma senza i problemi nell'amministratore attivo.

https://github.com/gregbell/active_admin/issues/2267#issuecomment-19197807

Answer 2

Questo è causato dalla decisione attiva di Admin per avvolgere i suoi stili CSS all'interno del selettore .active_admin. Di conseguenza, la maggior parte degli stili CSS di terze parti diventano meno specifici e il loro aspetto si rompe.

Per Select2, e tutte le gemme cui CSS file sono "fogli di stile" all'interno della cartella, aggiungere le seguenti righe in fondo active_admin.css.scss:

body.active_admin { 
    @import "select2"; 
} 

questo darà tutti gli stili di Select2 body.active_admin selettore, rendendoli più specifico rispetto agli stili di Active Admin.