1

Como posso deixar o modal abaixo responsivo de acordo com a resolução do monitor(15" ~ 21"), se eu adiciono width & height pra monitores de 21" ele fica bom, porém se eu jogo em notebook(15") fica sobrepondo toda tela.. Não consegui encontrar uma forma de corrigir

<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>
2

1 Resposta 1

3

Para o modal ficar responsivo em qualquer tela, altere a classe .modal-dialog com min-width:

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

Exemplo:

.modal-dialog{
   min-width: 90vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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>

8
  • só isso mesmo? aqui não funfou não.
    – user60252
    Commented 31/10/2018 às 21:24
  • na verdade, eu coloquei em um arquivo externo chamei-o-lo-o :) e não funcionou. Coloquei no arquivo do modal e funcionou sim.
    – user60252
    Commented 31/10/2018 às 21:39
  • agora me diga, como fazer as letras responsivas?
    – user60252
    Commented 31/10/2018 às 21:41
  • Fala vovô! Cara, letras responsivas são um problema. Eu geralmente uso regras @media screen para alterar o px da fonte de acordo com a largura da tela, mas às vezes usando vw também funciona. Vai depender do que se quer fazer, do tamanho que quer mostrar de acordo com a largura da tela etc.
    – Sam
    Commented 31/10/2018 às 21:43
  • já to de saida, depois conversamos, valeu!!
    – user60252
    Commented 31/10/2018 às 21:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .