select2をアクティブな管理者と連携させる

Question

Active Adminを使用しているアプリケーションで作業していて、選択入力から複数の値を選択する必要がある場合は、関連するJSとCSSを問題なく追加するSelect2宝石を追加しました何らかの理由でセレクトボックスが見た目を少し変えてしまったようですが、見た目にはSelect2の外観がありません。ここで

は私のコードです：

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

active_admin.css.scss

は解決

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

activeadminフォーム

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

Answer 1

問題をactive_admin.js、選ばれたJSを使用しますseの代わりにlect2は、select2と同様に動作しますが、アクティブな管理者の問題はありません。

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

Answer 2

これは.active_adminセレクタ内のCSSスタイルをラップするアクティブな管理者の判断によるものです。結果として、サードパーティ製の宝石のCSSスタイルのほとんどは、あまり具体性がなくなり、外観が壊れてしまいます。 SELECT2のために

、及びそのCSSファイル内にある「スタイルシート」フォルダ、active_admin.css.scssの下部に以下の行を追加し、すべての宝石：

body.active_admin { 
    @import "select2"; 
} 

これは、より多くのそれらを作る、SELECT2のスタイルbody.active_adminセレクタのすべてを与えますActive Adminのスタイルに特有のものです。