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!