Responsive modal

Asked

Viewed 554 times

1

How can I leave the below modal responsive according to the monitor resolution(15" ~ 21"), if I add width & height for 21" monitors it looks good, but if I play in notebook(15") is overlapping the entire screen.. I couldn’t find a way to fix

<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>
html5 css3
  • 1

    Tried media queries??

  • 1

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

1 answer

3


For the modal to be responsive on any screen, change the 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>
<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>

  • just that? Here it didn’t hurt no.

  • actually, I put in an external file called it :) and it didn’t work. I put in the modal file and it worked yes.

  • now tell me, how to make the lyrics responsive?

  • Speak Grandpa! Man, responsive lyrics are a problem. I usually use @media screen rules to change the font px according to the width of the screen, but sometimes using vw also works. It will depend on what you want to do, the size you want to show according to the width of the screen etc.

  • I’m leaving, then we’ll talk, thanks!!

  • Uncle, next: two points, one on top and one on bottom :D. As it is only for mobiles, I used rem was beautiful! Already on the desktop the letters were like acessibilidade kkk but nothing unpalatable. Already deserved his answer as useful!!! Now, it would be interesting to make an OBS in the sense of the sources, like, in this case we have to adapt the source of the texts and etc....

  • Mom! Dude, leave the font thing for someone to ask an objective question. ;)

  • Blz, I’d rather leave it to another question!

Show 3 more comments

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.