ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

jQueryプラグインChosenで選択肢の表示幅が狭くなる現象

スポンサーリンク

jQueryプラグインのChosenを適用して動作確認をしたところ、選択肢を選択するためにクリックすると、選択肢を表示をする部分の幅が狭く表示されました。
f:id:AJYA:20181102124733p:plain

原因を調べる

Chosen適用前のselectタグに幅を指定していますが、Chosen適用後に幅の指定はしていません。
Chosen適用時に幅の指定を行っても変わりません。

$("#select").chosen({width: "500px"}); 


Google Chromeデベロッパーツールを使って確認したところ、Chosen適用後の選択肢部分はulタグで作成されていました。
Chosenを適用したselectタグが存在するページは、ulタグに対してCSSで幅を指定していました。
CSSのulタグの指定が、Chosen適用後の選択肢部分にも反映されたために、選択肢部分が狭くなっていました。
f:id:AJYA:20181102125341p:plain

対処方法

ulタグに対してCSSで幅を指定する必要性がないページだったので、幅の指定を削除しました。
f:id:AJYA:20181102125645p:plain
あるいは、CSS

.chosen-container .chosen-results {
    width: 100%;
}

としてもいいのかもしれません。


思わぬところで手間がかかってしまいました。

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes