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

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

chrome、FireFoxの画面表示

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;">

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

行動規範の内容に同意します

回答1件

ベストアンサー

下記部分に指定されているクラス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

総合スコア1907

退会済みユーザー

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; } }

行動規範の内容に同意します