htmlcssdompdf
Dompdf - how to display table and graph sidebyside?
I have a question regarding dompdf as what I am trying to do is print everything in one line so 4 html different portion on one line:
like this working fine screenshot 1:
but if I have first table as long table then it breaks everything and I couldn't get the output same as the first screenshot.
My Code is very simple and I know it's must be some quick html/css fix but what I have no idea or can I set pointer of print back on top so it manage screenshot- 1 even after printing the first long table?
<style>
#content_pdf { margin-top:15px; width: 100%; }
#header { top: -40px; border-bottom: 0.1pt solid #aaa !important; height:35px; position: fixed; /* top: -115px;*/
width: 100% !important;
}
#footer { bottom: 10; border-top: 0.1pt solid #aaa; }
#header table,
#footer table { width: 100%; border-collapse: collapse; border: none; }
#header td,
#footer td { padding: 0; width: 50%; }
.page-number { text-align: center; }
.page-number:before { content: 'Page ' counter(page); } /* hr { page-break-after: always; border: 0; }*/ table{ font: arial !important; font-size:9px !important; }
.quarterPage { width: 25% !important; display: inline-block !important; margin: 0px !important; padding: 0px !important; float: left !important; height: auto !important; } </style> </head>
<body class=' page-footer-fixed-mobile page-sidebar-closed page-header-fixed page-quick-sidebar-over-content page-sidebar-fixed page-footer-fixed'>
<div id='header'> <table>
<tr>
<td><strong><em> Report</em></strong></td>
<td style='text-align: right;'><img src='00' style='height: 30px; width:auto; padding:2px;' /></td>
</tr> </table> </div> <div id='content_pdf'>
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"><div class="row"><div class="col-md-6 col-sm-12"></div><div class="col-md-6 col-sm-12"></div></div><div class="table-scrollable"><table class="table table-striped table-hover telco_datatable dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr role="row"><th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"></th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Source: activate to sort column ascending">Source</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Service Number: activate to sort column ascending">Service Number</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending">Date</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending">Time</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Place Called: activate to sort column ascending">Place Called</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Number Called: activate to sort column ascending">Number Called</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Usage Type: activate to sort column ascending">Usage Type</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>23:57:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>20:19:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>19:52:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>19:50:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>19:36:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>19:34:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>19:29:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>19:14:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>18:47:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>18:30:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>18:21:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>23:52:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>18:20:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>18:10:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>18:05:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>17:57:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>17:37:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>17:28:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>17:13:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>17:06:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>17:05:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>17:02:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>23:39:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="even">
<td>16:57:00</td>
<td>Calls and Services</td>
</tr><tr role="row" class="odd">
<td>16:55:00</td>
<td>Calls and Services</td>
</tr></tbody>
</table></div><div class="row"><div class="col-md-5 col-sm-12"></div><div class="col-md-7 col-sm-12"></div></div></div>
</div><div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'><img style='width: 100% !important;' src='temp/4c8165e95198abe352c9eb42c37e3397.png' /></div><div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'><img style='width: 100% !important;' src='temp/413375ced4a3b6e00bf588606be73539.png' /></div><div class='quarterPage' style='margin-left: 0px !important;'>
<div id="DataTables_Table_1_wrapper" class="dataTables_wrapper no-footer"><div class="row"><div class="col-md-6 col-sm-12"></div><div class="col-md-6 col-sm-12"></div></div><div class="table-scrollable"><table class="table table-striped table-hover user_datatable dataTable no-footer" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
<thead>
<tr role="row"><th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"></th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending">Username</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="First Name: activate to sort column ascending">First Name</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending">Last Name</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>2004</td>
<td>7.80</td>
</tr><tr role="row" class="even">
<td>2010</td>
<td>10.40</td>
</tr><tr role="row" class="odd">
<td>2010</td>
<td>9.10</td>
</tr><tr role="row" class="even">
<td>2010</td>
<td>9.10</td>
</tr><tr role="row" class="odd">
<td>2010</td>
<td>9.10</td>
</tr><tr role="row" class="even">
<td>2010</td>
<td>9.10</td>
</tr><tr role="row" class="odd">
<td>2011</td>
<td>20.50</td>
</tr><tr role="row" class="even">
<td>2011</td>
<td>9.10</td>
</tr><tr role="row" class="odd">
<td>2011</td>
<td>9.10</td>
</tr><tr role="row" class="even">
<td>2011</td>
<td>9.10</td>
</tr></tbody>
</table></div><div class="row"><div class="col-md-5 col-sm-12"></div><div class="col-md-7 col-sm-12"></div></div></div>
</div></div>
Hi Friends, please help me in this issue as I am trying to figure out from so long now or at least if anyone have an idea that how I can put printer printing pointer of dompdf to put again on first page to print rest of the next element to the long html table.
Solution
This is due to a limitation in how dompdf renders content. You're styling these elements with display: inline-block;, but this note regarding floats on the support forum applies:
dompdf renders page elements serially. What this means practically is that the floated element must be fully rendered before the next element. If a page breaks is encountered then the following element will be rendered after the page break.
You should be able to work around the issue if it's the case that your first table will always be the one that's longer than the page size. Instead of styling your elements as inline-block you might try floating them instead, e.g.
<div style="float: right; width: 25%;">
<!-- right-side table -->
</div>
<div style="float: right; width: 25%;">
<!-- bar graph -->
</div>
<div style="float: right; width: 25%;">
<!-- pie chart -->
</div>
<div style="width: 25%;">
<!-- left-side table -->
</div>
Or, even, absolutely positioning the right three columns and leaving the left-most column as above.