Skip to content
Advertisement

PHP Code To Print Model window printing scroll bar as well

I am using PHP Bootstrap, and trying to print Model window, My problem is that it is printing with scrollbar and skipping hidden content behind the scrollbar, i need to print entire content irrespective of the scrollbar appearing or not. It is ok if I get multiple pages to print.

Please refer these screenshots,

This is my model window content with scrollbar hiding some content

What i get in print preview is this

I just want entire content to be printed may be on multiple pages but without scrollbar,

Removing scroll bar option from Model window makes it very long in some cases, so that is not the option.

Advertisement

Answer

Remove overflow property from the modal-body and Apply an overflow-y style to the div on which you want to make the scroller Like:

.my-custom-scrollbar {
position: relative;
height: 180px;
overflow-y: auto;
}
.my-table{
display:table;
width: 100%;
}
th,td,tr{
padding: 5px;
border:2px solid;
}
<div class="my-custom-scrollbar">
  <table class="my-table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

</div>

Have a nice day! 🙂 Thanks!

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement