Bootstrap4でテーブル内のDatetimePickerが裏側に隠れないようにする方法

2021.01.01 2021.01.01

Bootstrap4でテーブル内のDatetimePickerが裏側に隠れないようにする方法です。

テーブル内にBootstrap4のDatetimePickerを組み込んだところ、あれれ？裏側に隠れてしまった・・・。

テーブル内にBootstrap4のDatetimePickerが隠れてしまった

これではカレンダーを選択できない！

調べても全然情報が出てこなくて、解決には一苦労しました。

ここでは Bootstrap4でテーブル内のDatetimePickerが裏側に隠れないようにする方法 を紹介します。

解決方法

そもそもの原因はこれでした。

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

「.table-responsive」には「overflow」プロパティが設定されています。ボックスの範囲内に内容が収まらない場合の処置を自分で設定することで解決できます。

自前のcssに下記を追加します。

.table-responsive {
  overflow: visible !important;
}

ページを再表示すれば・・・、

Bootstrap4でテーブル内のDatetimePickerが正しく表示された

おおおー、ちゃんと表示された―！

Bootstrap4でテーブル内のDatetimePickerが裏側に隠れないようにする方法を紹介しました。

わかってしまえば簡単なことなんですけどね。なんだか思ったよりハマったので、記事にすることにしました。

同じ問題で悩んでいる人の助けになればうれしいですね。

おつかれさまでした。