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'}

Alcestis

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

Alcestis

What about ajax and autocompletion? – Dogmatic

As far as I can see, chosen has autocompletion, but lacks the optional-ness of it (ability to enter values that don't already exist) that you probably want with a tag list. Select2 claims that as a feature right up front. – Mall

@DanMitchell Thanks for the tip about Chosen as alternative to Select2. – Claudicant

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.

Bipetalous

I am getting this error Invalid CSS after "body": expected selector or at-rule, was ".active_admin {" – Kantianism