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 with no issues but for some reason the select boxes seem to change their appearance slightly but not to the ful Select2 appearance, upon inspection the JS doesn't look like its added 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

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.