How to remove vertical bar from print preview - html

Question

I am trying to print a bootstrap modal in chrome but I see always I press the print button and preview the print, the preview shows this vertical bar.
How can I remove this vertical bar in print preview. I don't know why this is showing. There is no vertical bar in the actual bootstrap modal which I am printing.
Any help is appreciated. Thanks
Here is the html coding:
<style>
.str td{
padding-top:1px !important;
padding-bottom:1px !important;
}
.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;}
</style>
<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 . '<br>' . $customer->city . ' ' . $customer->postal_code . ' ' . $customer->state . '<br>' . $customer->country;
?>
</div>
<div class="col-xs-4">
<small><?php echo lang('tel') . ': ' . $customer->phone . '<br>' . lang('email') . ': ' . $customer->email;
?></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?></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="text-right"><small><?=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="text-right"><small><?=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><?=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="text-right"><small><?=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="text-right"><small>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) {
?>
<div class="buttons">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<a href="<?= admin_url('sales/add_payment/' . $inv->id) ?>" class="tip btn btn-primary"
title="<?= lang('add_payment') ?>" data-toggle="modal" data-target="#myModal2">
<i class="fa fa-dollar"></i>
<span class="hidden-sm hidden-xs"><?= lang('payment') ?></span>
</a>
</div>
<div class="btn-group">
<a href="<?= admin_url('sales/add_delivery/' . $inv->id) ?>" class="tip btn btn-primary"
title="<?= lang('add_delivery') ?>" data-toggle="modal" data-target="#myModal2">
<i class="fa fa-truck"></i>
<span class="hidden-sm hidden-xs"><?= lang('delivery') ?></span>
</a>
</div>
<?php if ($inv->attachment) {
?>
<div class="btn-group">
<a href="<?= admin_url('welcome/download/' . $inv->attachment) ?>" class="tip btn btn-primary"
title="<?= lang('attachment') ?>">
<i class="fa fa-chain"></i>
<span class="hidden-sm hidden-xs"><?= lang('attachment') ?></span>
</a>
</div>
<?php
} ?>
<div class="btn-group">
<a href="<?= admin_url('sales/email/' . $inv->id) ?>" data-toggle="modal"
data-target="#myModal2" class="tip btn btn-primary" title="<?= lang('email') ?>">
<i class="fa fa-envelope-o"></i>
<span class="hidden-sm hidden-xs"><?= lang('email') ?></span>
</a>
</div>
<div class="btn-group">
<a href="<?= admin_url('sales/pdf/' . $inv->id) ?>" class="tip btn btn-primary"
title="<?= lang('download_pdf') ?>">
<i class="fa fa-download"></i>
<span class="hidden-sm hidden-xs"><?= lang('pdf') ?></span>
</a>
</div>
<?php if (!$inv->sale_id) {
?>
<div class="btn-group">
<a href="<?= admin_url('sales/edit/' . $inv->id) ?>" class="tip btn btn-warning sledit"
title="<?= lang('edit') ?>">
<i class="fa fa-edit"></i>
<span class="hidden-sm hidden-xs"><?= lang('edit') ?></span>
</a>
</div>
<div class="btn-group">
<a href="#" class="tip btn btn-danger bpo"
title="<b><?= $this->lang->line('delete_sale') ?></b>"
data-content="<div style='width:150px;'><p><?= lang('r_u_sure') ?></p><a class='btn btn-danger' href='<?= admin_url('sales/delete/' . $inv->id) ?>'><?= lang('i_m_sure') ?></a> <button class='btn bpo-close'><?= lang('no') ?></button></div>"
data-html="true" data-placement="top">
<i class="fa fa-trash-o"></i>
<span class="hidden-sm hidden-xs"><?= lang('delete') ?></span>
</a>
</div>
<?php
} ?>
</div>
</div>
<?php
} ?>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.tip').tooltip();
});
</script>

Answer 1

I'm no sure of what exactly your problem is, but you can try adding style="overflow: hidden;" at the beginning (at str) and maybe that solves the problem.

Answer 2

You can simply hide this scroll bar by adding this css property in your style tag only if your website do not have scrolling behaviour
html { overflow: hidden; }
But if you website does have scrolling behaviour and you just want to remove this scroll bar from printing document then you can use add these css proeprties in your style tag
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* make scrollbar transparent */
actual answer

Answer 3

Try using window.print() and hide everything except the modal. The scroll bars won’t be there using this method.