日々学んだことを残しておこう。きっと未来の自分が探しにくる。 (ただ忘れっぽいだけです…)

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- : スポンサー広告 :
Pagetop

bootstrap datepicker モーダルの下に表示されてしまう modal z-index


bootstrapで日付入力の時に便利なのが下のdatepickerでよく使っているんだけど、今回モーダル上にdatepickerをセットして使おうとしたら、datepickerのフォームがモーダルの下側になってしまう現象に遭遇。

ちなみにこの現象になったブラウザはChormeで、Firefox、IE11では問題なかったです。

(参考サイト)
日付入力に便利な「Datepicker for Bootstrap」

結局のところ、datepickerのz-indexがmodalより下側になっていることが原因なので、cssでdatepickerのz-indexを大きい数値にすることで回避できるらしい。

datepickerのz-indexが1051以上にすれば良いらしく、サンプルでは、1151になってたので、そのままセットしたら、クロームでもちゃんとモーダルの上側に表示されました。

cssに以下を追加すればOK。

.datepicker{
z-index: 1151 !important;
position: absolute;
}

(参考サイト)
Twitter Bootstrap Datepicker within modal window
Twitter Bootstrap Modalでdatepickerのカレンダーが表示されないとき
関連記事

2015-02-18 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop
コメントの投稿
非公開コメント

Pagetop
« next  ホーム  prev »

広告

読みたいと思っている書籍

Amazon Web Services クラウドネイティブ・アプリケーション開発技法 一番大切な知識と技術が身につく Amazon Web Services 定番業務システム12パターン 設計ガイド イラストで学ぶ 機械学習 最小二乗法による識別モデル学習を中心に (KS情報科学専門書) イラストで学ぶ ディープラーニング (KS情報科学専門書)

カウンタ

メールフォーム

名前:
メール:
件名:
本文:

GoogleTranslate

管理人のつぶやき

人気記事ランキング

カテゴリ

openclose

ブログ内検索

全記事表示リンク

全ての記事を表示する

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。