bootstrap3のmodalウィンドウを横スクロールできるようにする

5015 ワード
laravel5.5 Bootstrap3 modal modal テキストリンク

bootstrap3のmodalにテーブルを表示したら、横スクロールできなかった。
縦スクロールバーを表示する方法はドキュメントにあったけど、横スクロールはなかったのでメモ。

<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="{{ $primaryKey }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog　modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">primaryKey： {{ $primaryKey }}</h5>
                <h5 class="modal-title" id="exampleModalLabel">rowNo： {{ $rowNo }}</h5>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ $header }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{ $col }}</td>
                    </tr>
                    <tr>
                        <td>{{ $col }}</td>
                    </tr>
                    </tbody>
                </table>
                <small>青いセルは旧テーブルに存在しないカラムです</small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

modal-bodyにwithとoverflow-xの設定を追加する

</div>
- <div class="modal-body">
+ <div class="modal-body" style="width: 100%; overflow-x: auto;">
    <table class="table table-bordered">
        <thead>

laravel5.5で作ったdiffツールです
初めは新のデータが一覧表示されていて、行番号をクリックすると新旧の比較がmodalで開きます

modal呼び出し部分
<td>
    <a href="#bannerformmodal" data-toggle="modal" data-target="#{{ $primaryKey }}">{{ $rowNo }}</a>
</td>