質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

4622閲覧

bootstrap4のモーダル画面width幅がIE11だとオーバーフローする

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/03/01 06:35

編集2019/03/01 08:46

皆さん、お世話になります。
標題の件ですが
モーダル画面で設定したwidth値がFireFox、Chromeだと正常に反映されるのですが
IEだと何故か画面のWidth値が反映されず
画面からオーバーフローします。

chrome、FireFoxの画面表示
chrome、FireFoxの画面表示
IE11の画面表示
IE11の画面表示

ソースは以下のようなサンプルですが

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>テスト画面</title> <!-- BootstrapのCSS読み込み --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <!-- モーダルの設定--> <div class="modal fade" id="myTest" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1500"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content" style="width: 1500px!important; margin-left: -300px;"> <div class="modal-header"> <table width="1400px"> <tr> <td align="center"> <h5 class="modal-title" id="exampleModalLabel">テスト画面</h5> </td> </tr> </table> </div> <div class="modal-body"> <table width="1400px"> <tr> <td>テスト<input type="text" value="" size="5" maxlength="3"></td> <td> テスト<input type="text" value="" size="30" maxlength="40"> </td> <td> テスト<input type="text" value="" size="30" maxlength="40"> </td> <td> テスト<input type="text" value="" size="30" maxlength="40"> </td> </tr> </table> </div> <div class="modal-footer"> <table width="1400px"> <tr> <td align="left"> <button type="button" class="btn btn-outline-light bg-success btn-sm" data-dismiss="modal">閉じる</button> </td> </tr> </table> </div><!-- /.modal-footer --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <table width="1000px"> <tr> <td> <button class="btn btn-outline-light bg-success btn-sm" data-toggle="modal" data-target="#myTest" data-backdrop="static">モーダル画面</button> </td> </tr> </table> </body> </html>

以下のwidth: 1500px;がIE11だと反映されません。
modal-lg幅のままです。

<div class="modal-content" style="width: 1500px; margin-left: -100px;">

何か解決方法はあるでしょうか?
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記部分に指定されているクラスmodal-lgにmax-widthが定義されていて、そのため.modal-contentが思うように広がらないのだと思われます。

css

1<div class="modal-dialog modal-lg modal-dialog-centered">

.modal-lgよりも大きい.modal-xlというクラスもありますが、横幅1200px以上の画面でmax-width: 1140px; となっているので、上記のmodal-lgのところをmodal-xlとした上でmax-widthのスタイル指定をされたら解決すると思います。(modal-xlにしなくても同じ結果だと思いますが。)

投稿2019/03/01 12:16

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/01 13:24

サンプルプログラムをmodal-xlにすると大丈夫ですね。 modal-xlの存在は知りませんでした。 今職場ではないので週明けに本番プログラムに実装して 試してみたいと思います。 一先ず有難うございます。
退会済みユーザー

退会済みユーザー

2019/03/04 01:41

modal-xlだと最大幅が1140pxなのですね。 今回のモーダル画面は1900px相当を検討しているので やはり幅がはみ出てしまいました。 何か他に解決方法はないものでしょうか?
退会済みユーザー

退会済みユーザー

2019/03/04 03:02

cssにてオーバーライドすれば良い事が解りました。 lgについてと、xlについてのサイズを以下のようにすると解決しました。 @media (min-width: 800px) { .modal-lg { width: 100%; max-width:1050px; } } @media (min-width: 1140px) { .modal-xl { width: 100%; max-width:1920px; } }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問