0

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.

Akshay
  • 85
  • 7
  • 1
    Possible duplicate of [How do I print the entire bootstrap modal where content in modal body is scrolled out of view](http://stackoverflow.com/questions/29482477/how-do-i-print-the-entire-bootstrap-modal-where-content-in-modal-body-is-scrolle) – MDev Aug 11 '16 at 16:25
  • Ohh yes, you are right , Thanks so much that is what I was looking for. Let me try it in my project and see the result. – Akshay Aug 16 '16 at 07:07

1 Answers1

2

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!

Sajjad Ali
  • 84
  • 6