Getting select2 to work with active admin

Question

I am working with an app with Active Admin and needed to select multiple values from a select input, I have added the Select2 gem which adds all the relevant the JS and CSS

Answer 1

Problem solved, use chosen js instead of select2, works equally as well as select2 but without the issues in active admin.

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

Answer 2

This is caused by Active Admin's decision to wrap its CSS styles inside .active_admin selector. As a result, most of third-party gem's CSS styles become less specific, and their appearance become broken.

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

body.active_admin {
  @import "select2";
}

This will give all of select2's styles body.active_admin selector, making them more specific than Active Admin's styles.