☰

Twitter ブートストラップ スクロール可能なモーダル 質問する

tag-icon • tag-icon css twitter-bootstrap
Twitter ブートストラップ スクロール可能なモーダル 質問する

私は現在取り組んでいるプロジェクトに Twitter Bootstrap を使用しています。

やや長めのフォームを含むモーダル ウィンドウがあり、ウィンドウが小さくなりすぎるとモーダルがスクロールしない (スクロールできないページから消えてしまう) のが気に入りませんでした。

これを修正するために、次のCSSを使用しました

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

これは Chrome ではまさに私が望んでいるとおりに動作します (つまり、ウィンドウが十分に大きいときはフォームはフルサイズですが、ウィンドウが縮小するとモーダルも縮小してスクロール可能になります)。問題は、IE ではモーダルが画面外にあることです。この問題のより良い解決策をお持ちの方はいらっしゃいますか?

私の例は tinyhousemap.com で見つかります (モーダルを表示するには、ナビゲーション ウィンドウの [マップにエントリを追加] をクリックしてください)

ありがとう

ベストアンサー1

以下の解決策はどうでしょうか? 私の場合はうまくいきました。これを試してみてください:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

詳細：

  1. overflow-y: auto;.modal クラスからまたはを削除しますoverflow: auto;(重要)
  2. max-height: 400px;クラスから削除する.modal（重要）
  3. .modal に .modal-bodyを追加しますmax-height: 400px;(または 未満でも構い420pxませんが を超えることはできません450px)
  4. overflow-y: auto;に追加.modal .modal-body

完了です。本文のみがスクロールします。

おすすめ記事