Webpage not showing correct result after print - html

Question

Hi I am trying to print a webpage. In the web print preview, it is showing properly, but when I actually print it on paper, the text doesn't show properly.
Some float:right properties are not working and similarly bootstrap grid too.
You can see the issue in picture.
See at the top "To" section. The text is properly aligned. Also the text at the bottom "Total", "Grand total" etc are float:right in actual page, but when I print they are not float:right.
html and css:
#media print {
#page {
size: auto;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666666666666%;
}
.col-xs-10 {
width: 83.33333333333334%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666666666666%;
}
.col-xs-7 {
width: 58.333333333333336%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666666666667%;
}
.col-xs-4 {
width: 33.33333333333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.666666666666664%;
}
.col-xs-1 {
width: 8.333333333333332%;
}
}
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
padding: 5px;
}
<div class="modal-dialog modal-lg no-modal-header">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-2x">×</i>
</button>
<button type="button" class="btn btn-xs btn-default no-print pull-right" style="margin-right:15px;" onclick="window.print();">
<i class="fa fa-print"></i> <?= lang('print'); ?></button>
<?php if ($logo) {
?>
<div class="text-cente no-print" style="margin-bottom:20px;">
<img src="<?= base_url() . 'assets/uploads/logos/' . $biller->logo; ?>" alt="<?= $biller->company && $biller->company != '-' ? $biller->company : $biller->name; ?>">
</div>
<?php
} ?>
<div class="well well-sm no-print">
<div class="row bold">
<div class="col-xs-5">
<p class="bold">
<?= lang('date'); ?>:
<?= $this->sma->hrld($inv->date); ?><br>
<?= lang('ref'); ?>:
<?= $inv->reference_no; ?><br>
<?php if (!empty($inv->return_sale_ref)) {
echo lang('return_ref') . ': ' . $inv->return_sale_ref;
if ($inv->return_id) {
echo ' <a data-target="#myModal2" data-toggle="modal" href="' . admin_url('sales/modal_view/' . $inv->return_id) . '"><i class="fa fa-external-link no-print"></i></a><br>';
} else {
echo '<br>';
}
} ?>
<?= lang('sale_status'); ?>:
<?= lang($inv->sale_status); ?><br>
<?= lang('payment_status'); ?>:
<?= lang($inv->payment_status); ?><br>
<?= $inv->payment_method ? lang('payment_method') . ': ' . lang($inv->payment_method) : ''; ?>
<?php
if ($inv->payment_method == 'cod' || $inv->payment_method == 'bank' && $inv->attachment) {
?>
<a href="<?= admin_url('welcome/download/' . $inv->attachment) ?>" title="<?= lang('attachment') ?>" class="tip">
<i class="fa fa-chain"></i>
</a>
<?php
}
?>
<?php if ($inv->payment_status != 'paid' && $inv->due_date) {
echo '<br>' . lang('due_date') . ': ' . $this->sma->hrsd($inv->due_date);
} ?>
</p>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="row" style="margin-bottom:15px;">
<?php if ($Settings->invoice_view == 1) {
?>
<div class="col-xs-12 text-center">
<h1>
<?= lang('tax_invoice'); ?>
</h1>
</div>
<?php
} ?>
</div>
<?php
$col = $Settings->indian_gst ? 5 : 4;
if ($Settings->product_discount && $inv->product_discount != 0) {
$col++;
}
if ($Settings->tax1 && $inv->product_tax > 0) {
$col++;
}
if ($Settings->product_discount && $inv->product_discount != 0 && $Settings->tax1 && $inv->product_tax > 0) {
$tcol = $col - 2;
} elseif ($Settings->product_discount && $inv->product_discount != 0) {
$tcol = $col - 1;
} elseif ($Settings->tax1 && $inv->product_tax > 0) {
$tcol = $col - 1;
} else {
$tcol = $col;
}
?>
<div class="row" style="margin-bottom:10px;">
<?php if ($Settings->invoice_view == 1) {
?>
<div class="col-xs-12 text-center">
<h1>
<?= lang('tax_invoice'); ?>
</h1>
</div>
<?php
} ?>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-2" style="padding-right: 0px;">
<?php echo $this->lang->line('to'); ?>:
</div>
<div class="col-xs-10 pull-left" style="padding-left: 10px;">
<strong>
<p>
<small><?= $customer->company && $customer->company != '-' ? $customer->company : $customer->name; ?></small>
</p>
<?= $customer->company && $customer->company != '-' ? '' : 'Attn: ' . $customer->name ?>
</strong></p>
</strong>
</div>
<div class="col-xs-10" style="padding-right: 0px;">
<small>
<?php if ($customer->vat_no != '-' && $customer->vat_no != '') {
echo '<br>' . lang('vat_no') . ': ' . $customer->vat_no;
}
if ($customer->gst_no != '-' && $customer->gst_no != '') {
echo '<br>' . lang('gst_no') . ': ' . $customer->gst_no;
}
if ($customer->cf1 != '-' && $customer->cf1 != '') {
echo lang('ccf1') . ': ' . $customer->cf1;
}
if ($customer->cf2 != '-' && $customer->cf2 != '') {
echo '<br>' . lang('ccf2') . ': ' . $customer->cf2;
}
if ($customer->cf3 != '-' && $customer->cf3 != '') {
echo '<br>' . lang('ccf3') . ': ' . $customer->cf3;
}
if ($customer->cf4 != '-' && $customer->cf4 != '') {
echo '<br>' . lang('ccf4') . ': ' . $customer->cf4;
}
if ($customer->cf5 != '-' && $customer->cf5 != '') {
echo '<br>' . lang('ccf5') . ': ' . $customer->cf5;
}
if ($customer->cf6 != '-' && $customer->cf6 != '') {
echo '<br>' . lang('ccf6') . ': ' . $customer->cf6;
}
?>
</small>
</div>
</div>
</div>
<div class="col-xs-4">
<?php
echo '<small>' . $customer->address . '<div>' . $customer->city . ' ' . $customer->postal_code . ' ' . $customer->state . '</div><div>' . $customer->country . '</div>';
?>
</div>
<div class="col-xs-4">
<small><?php echo lang('tel') . ': ' . $customer->phone . '<div>' . lang('email') . ': ' . $customer->email . "</div>";
?></small>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped print-table order-table" style="page-break-inside:auto">
<tbody>
<tr>
<th colspan="2"><small>SALES PERSON</small></th>
<th colspan="2"><small>REFERENCE NO</small></th>
<th colspan="2"><small>INVOICE DATE</small></th>
<th colspan="2"><small>PAID BY</small></th>
</tr>
<tr>
<td colspan="2"><small><?= $created_by->first_name ?></small></td>
<td colspan="2"><small><?= $inv->reference_no ?></small></td>
<td colspan="2"><small><?= $this->sma->hrld($inv->date) ?></small></td>
<td colspan="2"><small><?= $payments[0]->paid_by ?></small></td>
</tr>
<tr>
<th><small>NO</small></th>
<th><small>DESCRIPTION</small></th>
<th><small>QTY</small></th>
<th><small>UNIT</small></th>
<th><small>SUB TOTAL</small></th>
<th><small>%</small></th>
<th class="text-right"><small>TOTAL</small></th>
</tr>
<?php $r = 1;
if ($rows) {
foreach ($rows as $row):
?>
<tr class="str" style="<?php if ($r == 9) {
echo 'page-break-inside:avoid; page-break-after:auto;';
} ?>">
<td class="std"><small><?= $r ?></small></td>
<td class="std"><small><?= $row->product_name ?></small></td>
<td class="std"><small><?= $this->sma->formatQuantity($row->unit_quantity) ?></small>
</td>
<td class="std">
<small><?= number_format((float)$row->unit_price + $row->item_discount, 2, '.', '') ?></small>
</td>
<td class="std">
<small><?= number_format((float)($row->unit_price) * ($row->unit_quantity), 2, '.', '') ?></small>
</td>
<td class="std">
<small><?= number_format((float)$row->item_discount, 2, '.', '') ?></small></td>
<td class="text-right"><small><?= $this->sma->formatMoney($row->subtotal) ?></small>
</td>
</tr>
<?php
$r++;
endforeach;
}
if ($return_rows) {
echo '<tr class="warning"><td colspan="100%" class="no-border"><strong>' . lang('returned_items') . '</strong></td></tr>';
foreach ($return_rows as $row):
?>
<tr>
<td><small><?= $r ?></small></td>
<td><small><?= $row->product_name ?></small></td>
<td><small><?= $this->sma->formatQuantity($row->unit_quantity) ?></small></td>
<td>
<small><?= number_format((float)$row->unit_price + $row->item_discount, 2, '.', '') ?></small>
</td>
<td>
<small><?= number_format((float)($row->unit_price) * ($row->unit_quantity), 2, '.', '') ?></small>
</td>
<td><small><?= number_format((float)$row->item_discount, 2, '.', '') ?></small></td>
<td class="text-right"><small><?= $this->sma->formatMoney($row->subtotal) ?></small>
</td>
</tr>
<?php
$r++;
endforeach;
}
?>
</tbody>
<tfoot>
<tr>
<th colspan="6" class=""><small style="float: right;"><?= lang('total'); ?></small></th>
<th colspan="2" class="text-right">
<small "><?= $this->sma->formatMoney($return_sale ? (($inv->total + $inv->product_tax) + ($return_sale->total + $return_sale->product_tax)) : ($inv->total + $inv->product_tax)); ?></small>
</th>
</tr>
<?php
if ($inv->order_tax != 0) {
echo '<tr><th colspan="6><small>' . lang('tax') . '</th><th class="text-right"colspan="2"><small>' . $this->sma->formatMoney($return_sale ? ($inv->order_tax + $return_sale->order_tax) : $inv->order_tax) . '</small></th>
</tr>'; } if ($inv->order_discount != 0) { echo '
<tr>
<th colspan="6" class="text-right"><small>' . lang('order_discount') . '</small></th>
<th class="text-right" colspan="2"><small>' . $this->sma->formatMoney($return_sale ? ($inv->order_discount + $return_sale->order_discount) : $inv->order_discount) . '</small></th>
</tr>'; } if ($inv->shipping != 0) { echo '
<tr>
<th colspan="6" class="text-right"><small>' . lang('shipping') . '</th><th class="text-right" colspan="2"><small>' . $this->sma->formatMoney($inv->shipping) . '</small></th>
</tr>'; } if ($return_sale) { if ($return_sale->surcharge != 0) { echo '
<tr>
<th colspan="6" class="text-right"><small>' . lang('return_surcharge') . '</small></th>
<th class="text-right" colspan="2"><small>' . $this->sma->formatMoney($return_sale->surcharge) . '</small></th>
</tr>'; } } if ($Settings->indian_gst) { if ($inv->cgst > 0) { $cgst = $return_sale ? $inv->cgst + $return_sale->cgst : $inv->cgst; echo '
<tr>
<td colspan="6"><small>' . lang('cgst') . '</small></td>
<td class="text-right" colspan="2"><small>' . ($Settings->format_gst ? $this->sma->formatMoney($cgst) : $cgst) . '</small></td>
</tr>'; } if ($inv->sgst > 0) { $sgst = $return_sale ? $inv->sgst + $return_sale->sgst : $inv->sgst; echo '
<tr>
<td colspan="6"><small>' . lang('sgst') . '</small></td>
<td class="text-right" colspan="2"><small>' . ($Settings->format_gst ? $this->sma->formatMoney($sgst) : $sgst) . '</small></td>
</tr>'; } if ($inv->igst > 0) { $igst = $return_sale ? $inv->igst + $return_sale->igst : $inv->igst; echo '
<tr>
<td colspan="6"><small>' . lang('igst') . '</small></td>
<td class="text-right" colspan="6"><small>' . ($Settings->format_gst ? $this->sma->formatMoney($igst) : $igst) . '</small></td>
</tr>'; } } if ($pos_settings->rounding || $inv->rounding != 0) { ?>
<tr>
<th colspan="6" class="text-right"><small><?= lang('rounding'); ?></small></th>
<th colspan="2" class="text-right">
<small><?= $this->sma->formatMoney($inv->rounding); ?></small></th>
</tr>
<tr>
<th colspan="6" class=""><small style="float: right;"><?= lang('grand_total'); ?></small></th>
<th colspan="2" class="text-right">
<small><?= $this->sma->formatMoney($return_sale ? (($inv->grand_total + $inv->rounding) + $return_sale->grand_total) : ($inv->grand_total + $inv->rounding)); ?></small>
</th>
</tr>
<?php
} else {
?>
<tr>
<th colspan="6" class="text-right"><small style="float: right;"><?= lang('grand_total'); ?></small></th>
<th colspan="2" class="text-right">
<small><?= $this->sma->formatMoney($return_sale ? ($inv->grand_total + $return_sale->grand_total) : $inv->grand_total); ?></small>
</th>
</tr>
<?php
}
if ($inv->paid < ($inv->grand_total + $inv->rounding)) {
?>
<tr>
<th colspan="6" class=""><small style="float: right;"><?= lang('paid_amount'); ?></small></th>
<th colspan="2" class="text-right">
<small><?= $this->sma->formatMoney($return_sale ? ($inv->paid + $return_sale->paid) : $inv->paid); ?></small>
</th>
</tr>
<tr>
<th colspan="6" class=""><small style="float: right;">Due Amount</small></th>
<th colspan="2" class="text-right">
<small><?= $this->sma->formatMoney(($return_sale ? (($inv->grand_total + $inv->rounding) + $return_sale->grand_total) : ($inv->grand_total + $inv->rounding)) - ($return_sale ? ($inv->paid + $return_sale->paid) : $inv->paid)); ?></small>
</th>
</tr>
<?php
} ?>
<td colspan='8'>
<strong><small>Please Note : Any deposit balances are due prior to the above Confirmed
Product Delivery Date</small></strong>
<br>
<small>All goods remain the property of Arcadia Traders untill paid in full.</small>
<br>
<small>- Please use invoice number as reference for all payments.</small>
</td>
</tr>
</tfoot>
</table>
</div>
<?= $Settings->invoice_view > 0 ? $this->gst->summary($rows, $return_rows, ($return_sale ? $inv->product_tax + $return_sale->product_tax : $inv->product_tax)) : ''; ?>
<div class="row">
<div class="col-xs-12">
<?php
if ($inv->note || $inv->note != '') {
?>
<div class="well well-sm">
<p class="bold">
<?= lang('note'); ?>:</p>
<div>
<?= $this->sma->decode_html($inv->note); ?>
</div>
</div>
<?php
}
if ($inv->staff_note || $inv->staff_note != '') {
?>
<div class="well well-sm staff_note">
<p class="bold">
<?= lang('staff_note'); ?>:</p>
<div>
<?= $this->sma->decode_html($inv->staff_note); ?>
</div>
</div>
<?php
} ?>
</div>
<?php if ($customer->award_points != 0 && $Settings->each_spent > 0) {
?>
<div class="col-xs-5 pull-left">
<div class="well well-sm">
<?=
'<p>' . lang('this_sale') . ': ' . floor(($inv->grand_total / $Settings->each_spent) * $Settings->ca_point)
. '<br>' .
lang('total') . ' ' . lang('award_points') . ': ' . $customer->award_points . '</p>'; ?>
</div>
</div>
<?php
} ?>
<div class="order_barcodes no-print">
<table class="table">
<tbody>
<tr>
<td>
<div style="max-width:200px; padding-top:7px;">
<img src="<?= admin_url('misc/barcode/' . $this->sma->base64url_encode($inv->reference_no) . '/code128/74/0/1'); ?>" alt="<?= $inv->reference_no; ?>" class="bcimg">
</div>
</td>
<td class="text-right">
<div style="max-width:70px">
<?= $this->sma->qrcode('link', urlencode(admin_url('sales/view/' . $inv->id)), 2); ?>
</div>
</td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="col-xs-5 pull-right no-print">
<div class="well well-sm">
<p>
<?= lang('created_by'); ?>:
<?= $inv->created_by ? $created_by->first_name . ' ' . $created_by->last_name : $customer->name; ?>
<br>
<?= lang('date'); ?>:
<?= $this->sma->hrld($inv->date); ?>
</p>
<?php if ($inv->updated_by) {
?>
<p>
<?= lang('updated_by'); ?>:
<?= $updated_by->first_name . ' ' . $updated_by->last_name; ?><br>
<?= lang('update_at'); ?>:
<?= $this->sma->hrld($inv->updated_at); ?>
</p>
<?php
} ?>
</div>
</div>
</div>
<?php if (!$Supplier || !$Customer) {
?>

Answer 1

You are using colspan="6", remove that, hopefully it will solve your issue.