【bootstrapの挙動がうまくいかない.】datepicker カレンダーが上に行ってしまう時に対処した方法
むっちゃんＰRを含みます。
はじめに
bootstrapのdatepickerでカレンダーを表示するとフォームの上に表示されてしまいました。
以下の画像のような感じです。
私の理想はフォームの下へ表示されることです。いろいろなページを作成時に同じコードなのに上に表示されたり下に表示されたりしました。
原因や対処法を調べましたのでまとめていきます。
原因
原因としてカレンダーを表示するinput要素の上の空き具合でカレンダーの表示位置が変わってしまう事がわかりました。
私の場合はinput要素の上に何もない時に下にカレンダーが表示され、上にも下にも要素があるときに上に表示されました。
上に要素がない、もしくは上の要素の離れていた場合はカレンダーは下へ表示されました。
どう言う理屈かはわかりませんでしたがとりあえずカレンダーを下へ持っていく方法を探りました。
やり方
orientationを使う！
datepickerの表示位置を指定できる物で以下のように使用します。
$(function(){
$('.datepicker').datepicker({
orientation: 'auto',
});
});
上記のように場所をautoにするとスクロールなどによって最適な場所に表示をしてくれます。
ですが、固定をしたい場合は
orientation: 'bottom'
場所を上記のように指定します。上の例のようにbottomに指定した場合はカレンダーは常に下に表示されます。
以下のサイトを参考にさせていただきました。
bootstrap-datepickerのOption一覧 #JavaScript - Qiita
はじめにbootstrap-datepickerに存在するピッカーのオプションのまとめです。公式ドキュメントはこちら前提以下の形で定義する('.datepic…
これを使用すると表示位置をコントロールできるようになります。
他のやり方
position: relative;を使用するやり方もあります。
カレンダーの位置を制限して下へ持ってくるようですが私の場合これでは解決しなかったです...
position: relative;の方が断然楽にできると思うので参考にしたサイトを以下に貼っておきます。試してみてください！
【datetimepicker】カレンダー表示位置が崩れている問題をCSSで解決 #Rails - Qiita
##ハマったことbootstrapのdatetimepickerを利用してカレンダーを表示できたものの、ブラウザを縦に短くすると上の方(ヘッダー)に表示されてしまい、これが解決できずに1…
まとめ
以上がカレンダーの位置を下へ持っていく方法でした！！！！
参考になれば嬉しいです。
ご覧いただきありがとうございました。
