Responsive Modal

Navigation
1

How can I leave the modal below responsive according to the monitor resolution (15 "~ 21"), if I add width & height for 21 "monitors it looks good, but if I play on a notebook (15"), it overlaps the entire screen. I could not find a way to fix it. 

<div class="modal fade" style="position: absolute;" id="exampleModalLong" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle" style="text-align: center;">Detalhes do Pedido</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h2 style="text-align:left; margin-top: 0px;">Endereço de Entrega</h2>
                            <br />
                            <label>Endereço:</label>
                            <label id="lblEndereco" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;"></label>
                            <label style="margin-left: 250px;">Bairro:</label>
                            <label id="lblBairro" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;"></label>
                            <label style="margin-left: 200px;">Cidade:</label>
                            <label id="lblCidade" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;"></label>
                            <label style="margin-left: 115px">UF:</label>
                            <label id="lblUF" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;"></label>
                            <hr />
                            <h2 style="text-align:left; margin-top: 0px;">Produtos</h2>
                            <div id="table-wrapper">
                                <div id="table-scroll">
                                    <style>
                                        #table-wrapper {
                                            position: relative;
                                        }

                                        #table-scroll {
                                            height: 150px;
                                            overflow: auto;
                                            margin-top: 20px;
                                        }

                                        #table-wrapper table {
                                            width: 100%;
                                        }

                                            #table-wrapper table * {

                                                color: black;
                                            }

                                            #table-wrapper table thead th .text {
                                                position: absolute;
                                                top: -20px;
                                                z-index: 2;
                                                height: 20px;
                                                width: 35%;
                                                border: 1px solid red;
                                            }
                                    </style>
                                    <table class="table table-hover" id="itens">
                                        <thead>
                                            <tr>
                                                <th scope="col">Código</th>
                                                <th scope="col">Descrição</th>
                                                <th scope="col">Quantidade</th>
                                                <th scope="col">Pontos</th>
                                                <th scope="col">Preço</th>
                                                <th scope="col">Desconto</th>
                                                <th scope="col">Total</th>
                                            </tr>
                                        </thead>

                                        <tbody></tbody>

                                    </table>
                                </div>
                                </div>
                                <hr />
                                <h2 style="text-align:left; margin-top: 0px;">Totais</h2>
                                <br />
                                <br>
                                <label>Total Produtos:</label>

                                <label id="lblTotalProdutos" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;">R$ </label>

                                <label style="margin-left: 100px;">Total Frete:</label>
                                <label id="lblTotalFrete" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;">R$ </label>

                                <label style="margin-left: 180px;">Total Desconto:</label>
                                <label id="lblDesconto" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;">R$ </label>

                                <label style="margin-left: 180px">Total Pedido:</label>
                                <label id="lblTotalPedido" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;">R$ </label>
                            </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
    
asked by anonymous 23.03.2018 / 22:31

1 answer

4

For modal to be responsive on any screen, change class .modal-dialog with min-width : 

/* 90% da largura da tela. Se achar que é muito,
pode diminuir para o valor que achar melhor */
.modal-dialog{
   min-width: 90vw;
}

Example: 

.modal-dialog{
   min-width: 90vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<div class="modal fade" style="position: absolute;" id="exampleModalLong" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle" style="text-align: center;">Detalhes do Pedido</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2 style="text-align:left; margin-top: 0px;">Endereço de Entrega</h2>
                <br />
                <label>Endereço:</label>
                <label id="lblEndereco" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;"></label>
                <label style="margin-left: 250px;">Bairro:</label>
                <label id="lblBairro" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;"></label>
                <label style="margin-left: 200px;">Cidade:</label>
                <label id="lblCidade" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;"></label>
                <label style="margin-left: 115px">UF:</label>
                <label id="lblUF" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;"></label>
                <hr />
                <h2 style="text-align:left; margin-top: 0px;">Produtos</h2>
                <div id="table-wrapper">
                    <div id="table-scroll">
                        <style>
                            #table-wrapper {
                                position: relative;
                            }
   
                            #table-scroll {
                                height: 150px;
                                overflow: auto;
                                margin-top: 20px;
                            }
   
                            #table-wrapper table {
                                width: 100%;
                            }
   
                                #table-wrapper table * {
   
                                    color: black;
                                }
   
                                #table-wrapper table thead th .text {
                                    position: absolute;
                                    top: -20px;
                                    z-index: 2;
                                    height: 20px;
                                    width: 35%;
                                    border: 1px solid red;
                                }
                        </style>
                        <table class="table table-hover" id="itens">
                            <thead>
                                <tr>
                                    <th scope="col">Código</th>
                                    <th scope="col">Descrição</th>
                                    <th scope="col">Quantidade</th>
                                    <th scope="col">Pontos</th>
                                    <th scope="col">Preço</th>
                                    <th scope="col">Desconto</th>
                                    <th scope="col">Total</th>
                                </tr>
                            </thead>
   
                            <tbody></tbody>
   
                        </table>
                    </div>
                    </div>
                    <hr />
                    <h2 style="text-align:left; margin-top: 0px;">Totais</h2>
                    <br />
                    <br>
                    <label>Total Produtos:</label>
   
                    <label id="lblTotalProdutos" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;">R$ </label>
   
                    <label style="margin-left: 100px;">Total Frete:</label>
                    <label id="lblTotalFrete" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;">R$ </label>
   
                    <label style="margin-left: 180px;">Total Desconto:</label>
                    <label id="lblDesconto" style="color:cornflowerblue; font-size: 15.5px;    margin-left: 10px;">R$ </label>
   
                    <label style="margin-left: 180px">Total Pedido:</label>
                    <label id="lblTotalPedido" style="color:cornflowerblue; font-size: 15.5px; margin-left: 10px;">R$ </label>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
   </div>
    
24.03.2018 / 01:00
How to format dd / mm / yyyy for mm / dd / yyyy Repetitive excerpts of HTML