Delimit table inside a modal with css

Asked

Viewed 820 times

1

I have a modal that shows a table with some additional information from another table (I’ll call table), the problem is that the P table has many items, which makes it relatively large, and the table that is in the modal is generated from it, making the Modal gigantic too, the problem is that the P table when printed, gives me the option to scroll, but the modal does not have this option of scrolling leaving the huge table and cutting the same: Then I would like to fix a size for my Modal and that if the table is large, have a scrolling option inside the modal:

Following 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;
}

Follow the HTML/PHP section that generates Modal with the table: 

<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 gets "bigger" than the screen and does not bring the scroll bar

Edit1: I changed the question to show the table how it is now

php html css

  • Tried to define a height to the modal and give overflow: auto;?

  • @I_like_trains, this modal I took "Half ready", so I don’t know where I should define these functions you told me

  • Which was the modal plugin you used? Do you have the link? By chance you are using Bootstrap, because it has own modal that tb can be adapted. Not knowing what you used makes it kind of hard to answer.

  • @hugocsl, I only used Css, no plugin or bootstrap, all the CSS I used is in the question

  • So I tidied up your HTML that was having some formatting problems. Then you can adjust your code inside it, because it really matters and put a height value in Modal and enable Overflow. Then look at the answer there and if you have any problem tell me.

  • Hello @hugocsl, I made the changes as you suggested and the error persists, I will add a photo in the question to make it clear what is occurring

  • I changed the codes of the question with what’s on my agr machine

  • 1

    You can try putting max-height: 120px; and the overflow:auto in the table to see if it works

  • I put it on and nothing happened :(

  • It worked, man, I just had to clear the cache :D

  • Thank you very much!!!

  • 1

    hahaha good boy! Good luck with the project!

Show 7 more comments

2 answers

1

Create a new class (or enjoy the class 'modal-body' even), define the height and add property overflow: auto, That should solve your problem.

However, you need to look at the structure of your code.

  • The tag <center> not supported in HTML5, see your version html.
  • No need to put tags inside the modal <html> and <body>. These tags have already been defined on your page.
  • If you want to better define the structure of your <table>, utilize <thead> and <tbody>.

1


Cara had to give a little stir in the part where you call the table because the HTML was not well formatted.

Plus I needed to put some styles on .modal-body

That stayed that way:

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

See how the result turned out. Now you have a Scroll inside Modal. (OBS: to have the scroll the content has to be greater than max-height, and the overflow:auto only enables when that content is greater than height)

Have it displayed on the "Whole Page" to see the best result

    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>

Browser other questions tagged php html css

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