jqueryのdatepicker / datetimepickerを最前面に表示したいのにelrteが部分的に優先して表示されてしまう、そんなとき

日付の入力にjqueryのdatepicker / datetimepickerを使い、本文の入力にWYSIWYGエディタであるelrteを使って開発をしていました。
datepickerの下にelrteを配置したところ、datepickerを最前面に表示したいのにelrteが部分的に優先して表示されてしまう、そんなとき。

そう。問題はz-indexにあります。

datepickerのz-indexは1になっているのに対して、elrteの一部のz-indexが1以上になっているようです。

datepicker z-indexでググるとヒントがいろいろ出てきます。
リーズナブル(簡単)な方法はcssでz-indexを固定してあげることです。

実際やってみるとどうにもうまくいきません。良くある例はこちら。


#ui-datepicker-div { z-index: 1000; }

さらに調べてみると、datepicker / datetimepickerのAPIが変更されたとき(April 17, 2010)に、CSSに値があるにも関わらず動的に設定するようになったようです。
そこでcssでの指定を優先させます。


.ui-datepicker { z-index: 1000 !important; }

1000という数字は勝ちたい相手に合わせて調整します。今回は1000で目的を達成できました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>