Getting select2 to work with an active administrator

Question

I am working with an application with an active administrator and I have to select several values ​​from the selected input, I added the Select2 icon, which adds all the relevant JS and CSS without problems, but for some reason the selection fields seem to slightly change the appearance, but not by completeness2 , after checking JS is not like adding all the correct classes ...... any ideas?

Here is my code:

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" }); 

activeadmin form

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

Answer 1

The problem is solved, use the selected js instead of select2, it works the same way, as well as select2, but without problems in the active admin.

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

Answer 2

This is caused by Active Admin's decision to migrate CSS styles within the .active_admin selector. As a result, most third-party CSS styles become less specific and their appearance becomes impaired.

For select2 and all gems whose CSS files are inside the stylesheets folder, add the following lines at the bottom of active_admin.css.scss :

 body.active_admin { @import "select2"; } 

This will give the entire select2 style body.active_admin , which makes them more specific than Active Admin styles.