Organize table within modal

Question

Organize table within modal

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a small problem with a table that shows me some data stored in the database, once I have loaded many records the table goes out of control.

My idea is that the table has a vertical scroll, but I do not know how to put it, try this, but it does not work:

style="height: 200px; overflow-y: auto;"

I show how I have

from now, Thank you very much everyone!

javascript html php css datatables

asked by Diego Arce 15.10.2018 в 15:55

source

2 answers

1

You should just place the following CSS properties to the .modal-body selector like this:

.modal-body{
  max-height:150px;
  overflow:auto;
}

.modal-body{
  max-height:150px;
  overflow:auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

answered by 15.10.2018 в 16:49

Build JSONArray from SQLite database How to show a report with jasperreport when clicking on a button?

score 1 · Accepted Answer

only works on IE9 +, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ and iOS 6 +

style="max-height: calc(100vh - 210px);overflow-y: auto";

I do not know if you are using boostrap I recommend you to add pagers and that you order it alphabetically.

Greetings