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

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

原因を調べる

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

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

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

対処方法

ulタグに対してCSSで幅を指定する必要性がないページだったので、幅の指定を削除しました。

あるいは、CSSで

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

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

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

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