1

Tenho um modal que mostra uma tabela com algumas informações adicionais a partir de uma outra tabela (Chamarei de tabelaP), o problema e que a tabelaP possui muitos itens, o que a torna relativamente grande, e a tabela que está no modal é gerada a partir dela, tornando o Modal gigantesco também, o problema é que a tabelaP quando imprimida, me dá a opção de rolagem, porém o modal não tem essa opção de rolagem deixando a tabela enorme e cortando a mesma: Então gostaria de fixar um tamanho para o meu Modal e que caso a tabela seja grande, tenha uma opção de rolagem dentro do modal:

Segue CSS: modal_qm.css

    body {
  color: #333;
  font-family: 'Helvetica', arial;
}
.wrap {
  padding: 40px;
  text-align: center;
  float: left;
}

.btn {
  background: #808080;
  border: #808280 solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #808280;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -400px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 800px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 20px;
  max-height: 50px;
  overflow: auto;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}

Segue o trecho HTML/PHP que gera o Modal com a tabela:

<link rel="stylesheet" type="text/css" href="modal_qm.css"/>

    <div class="wrap">
  <a href="#modal-one" class="btn btn-big">Tabelas consultadas</a>
</div>

<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Tabelas - QuotesMem</h2>
      <a href="#" class="btn-close" aria-hidden="true">x</a>
    </div>
    <div class="modal-body">
      <table>
        <tbody>
        <?php

         echo '<tr align="center">';
         echo '<th>' .Papel. '</th>';
    for($h = 1; $h < $k + 1; $h++){
      $nome = "Tabela Server";
      $hora_top = "$nome $h";
      echo '<th>' .$hora_top. '</th>';
    }

    echo '</tr>';

for($n = 0; $n < $j; $n++){
      echo '<tr>';
      $trans = $mat[$n][(($k*2)+3)];
      echo '<td class='.$trans.'>' .$mat[$n][0]. '</td>';
      for($o = 0; $o < $k ; $o++){
        echo '<td class='.$trans.'>'.$mat[$n][(($k*2)+2)].'</td>';
}
echo '</tr>';
}
        ?>
        </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Voltar</a>
    </div>
  </div>
</div>

Modal fica "maior" que a tela e não traz a barra de rolagem

Modal fica "maior" que a tela e não traz a barra de rolagem

Edit1: Alterei a pergunta para mostrar a tabela como ela está agora

12
  • Tentou definir um height para o modal e dar overflow: auto;? Commented 7/03/2018 às 16:38
  • @I_like_trains, esse modal eu peguei "Meio pronto", então não sei aonde devo definir essas funções que vc me falou Commented 7/03/2018 às 16:57
  • Qual foi o plugin de modal que vc usou? Tem o link? Por acaso vc está usando Bootstrap, pois ele tem o próprio modal que tb pode ser adaptado. Sem saber o que usou fica meio difícil te responder.
    – hugocsl
    Commented 7/03/2018 às 17:21
  • 1
    Vc pode tentar colocar max-height: 120px; e o overflow:auto na tabela para ver se funciona
    – hugocsl
    Commented 7/03/2018 às 22:50
  • 1
    hahaha boa garoto! Boa sorte com o projeto!
    – hugocsl
    Commented 8/03/2018 às 13:14

2 Respostas 2

1

Cara tive que dar uma pequena mexida na parte onde vc chama a tabela por que o HTML não estava bem formatado.

Além disso precisei colocar alguns estilos na .modal-body

Que ficou dessa forma:

.modal-body {
  padding: 20px;
  max-height: 120px;
  overflow: auto;
}

Veja como ficou o resultado. Agora vc tem um Scroll dentro do Modal. (OBS: para ter o scroll o conteúdo tem que ser maior que o max-height, e o overflow:auto só abilita quando esse conteúdo for maior que a altura)

Mande exibir na "Página toda" para ver o resultado melhor

    body {
  color: #333;
  font-family: 'Helvetica', arial;
}
.wrap {
  padding: 40px;
  text-align: center;
  float: left;
}

.btn {
  background: #808080;
  border: #808280 solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #808280;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -400px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 800px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 20px;
  max-height: 120px;
  overflow: auto;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
<div class="wrap">
          <a href="#modal-one" class="btn btn-big">Tabelas consultadas</a>
        </div>
        
        <div class="modal" id="modal-one" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-header">
              <h2>Tabelas - QuotesMem</h2>
              <a href="#" class="btn-close" aria-hidden="true">x</a>
            </div>
            <div class="modal-body">

                
              <table>
                  <tbody>
                    <tr>
                        <tr>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veniam explicabo labore nam vel praesentium, ipsa architecto reiciendis doloribus, voluptas numquam amet recusandae. Sequi, voluptas eius magni quidem cumque aut sunt ad aliquid! Nobis odio doloremque dolorem inventore cumque, officia, soluta recusandae ab quisquam, vero dolores quasi tempore error amet distinctio ipsam beatae cupiditate. Voluptatem tempore velit repudiandae quae, ullam doloremque sed nulla vitae tenetur ipsam fugit suscipit possimus sunt ad delectus et earum. Ea debitis similique consectetur error itaque nostrum quia earum quasi, beatae veniam quas porro, enim sed unde aliquid quo, dolorum excepturi? A non perspiciatis harum tempora.
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veniam explicabo labore nam vel praesentium, ipsa architecto reiciendis doloribus, voluptas numquam amet recusandae. Sequi, voluptas eius magni quidem cumque aut sunt ad aliquid! Nobis odio doloremque dolorem inventore cumque, officia, soluta recusandae ab quisquam, vero dolores quasi tempore error amet distinctio ipsam beatae cupiditate. Voluptatem tempore velit repudiandae quae, ullam doloremque sed nulla vitae tenetur ipsam fugit suscipit possimus sunt ad delectus et earum. Ea debitis similique consectetur error itaque nostrum quia earum quasi, beatae veniam quas porro, enim sed unde aliquid quo, dolorum excepturi? A non perspiciatis harum tempora.

                        </td>
                    </tr>
                </tbody>
              </table>
           
            </div>
            <div class="modal-footer">
              <a href="#" class="btn">Voltar</a>
            </div>
          </div>
        </div>

1

Crie uma nova class (ou aproveite a class 'modal-body' mesmo), defina o height e adicione a propriedade overflow: auto, isso deve resolver o seu problema.

Porém, precisa se atentar a estrutura do seu código.

  • A tag <center> não é suportada no HTML5, veja a versão do seu html.
  • Não é preciso colocar dentro da modal as tags <html> e <body>. Essa tags já foram definidas na sua página.
  • Caso queira definir melhor a estrutura de sua <table>, utilize <thead> e <tbody>.

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 .