Bootstrapのモーダル展開時のパディングとスクロール問題解消

作成日:

Bootstrapのモーダルを展開した際に、

  • bodyに一見不可解なpadding-right: 17px;が追加される。
  • 背景スクロールが実行できてしまう。

という問題が発生しました。

Bootstrapのドキュメントでは問題無いのだけど、自分のサイトで試すと上記のような症状が現れました。

この解決策として、モーダル展開時にbodyに追加される.modal-openクラスにheight: 100%を追加し、.modalクラスにpadding-right: 0!important;を追加して解決出来ました。

CSS
.modal-open {
  overflow: hidden;
  height: 100%;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0!important;
}
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。