【datetimepicker】カレンダー表示位置が崩れている問題をCSSで解決 #Rails

ハマったこと

bootstrapのdatetimepickerを利用してカレンダーを表示できたものの、ブラウザを縦に短くすると上の方(ヘッダー)に表示されてしまい、これが解決できずに1日を無駄にした。。

参考ブログ: https://github.com/NetCommons3/NetCommons3/issues/200

実現したいこと【デモ】

ブラウザの縦幅が足りなくなると上にいきすぎてしまうので、
以下のGifのように、bottomが足りなくなった時でもカレンダーの位置を調節したい。

試したこと

bottomを増やして上に表示できないようにする

ブラウザを縦に縮めて行くとbottomが足りなくなり、カレンダーは上側に表示する仕様になっている。
ここで重要なのが、カレンダーよりしたのbottomは、カレンダー入力フォームの親要素の高さによって決まるということ。
ということは、親要素の高さをheight: 〇〇px のようにして高くすればいい。

これをすることによって、カレンダー以下のbottomが広くなり、そもそも上に表示されることもなく全て下に表示させることができる。
ただ注意点として、当然高さが増えるとスクロール範囲も増えてしまったので別の解決策を考えた。

親要素にrelativeを適用する

結局これにたどり着いた。
親要素にrelativeを設定し、datetimepickerの移動する範囲を制限してしまう方法だ。

修正前

test.html

<body>
  <div id="container">
    <input type='text' class="datetimechecker">
  </div>
</body>

修正後

test.html

<body>
  <div id="container">
    <div id="carendar-position">　 <!--追加 -->
      <input type='text_field' class="form-control">
    </div>
  </div>
</body>

test.css

/* 追加 */
#carendear-positon {
  position: relative;
}

これで指定した親要素を起点にカレンダーの位置を制限することができる。
逆にヘッダーのpositionをrelativeにしてしまえばヘッダーを起点にカレンダーが表示されるということ。

今回はinputformを起点にカレンダーを表示させたかったため、すぐ上に親要素を作り、relativeを適用させることでinputformを起点に表示位置を決定することができたわけですね。

まとめ

一時期、大元であるdatetimepickerのcssをいじっていましたが、ちょっといじると全てが崩れることが多く、複雑すぎて全くわかりませんでした。。。

なので下手にdatetimepickerをいじるより、

①カレンダーを表示させたい場所に親要素を追加
②その親要素にrelativeを設定する

という手順が一番簡単なやり方だと思います。