I'm using mpdf in Laravel and with this package version 4.0
The problem is that I have a list of questions in different heights which have 4 options, and I don't know the exact and approximate height of every div tag which question and answer options are there, I don't want some part of my question to go to another page
All parts of my question have to be on one page and if this couldn't happen, mpdf put that question tag element on the next page (all parts of questions)
this picture is for now which is wrong:
what I want:
This image
so for this problem, I want to know the height of my question element so I can determine if the new page is needed to add a page break(same as this question on StackOverflow), or any other solution to fix my issue
this is my blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
.sub-item-answer{
float: left;
display: inline !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer-num{
width: 5%;
float:right;
}
.q_1{
margin-top: 45px !important;
}
.question{
display: inline-block;
page-break-inside: avoid !important;
position: relative;
float:right;
}
.question-row{
display: inline !important;
width: 100%;
}
.question-number{
padding: 5px;
background: #bebe27;
border-radius: 10px;
width:10% !important;
text-align: center;
color:#ffffff;
font-weight: bold;
}
.main-question{
width: 95% !important;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<div style="page-break-inside: avoid !important;" class="question q_{{$i}}">
<div class="row question-row">
<div class="question-number col-sm-1"> سوال{{$i}} </div>
<div class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</div>
</div>
#if($question->options)
<div class="question-main-container" style="float: right">
#foreach($question->options as $option)
#php
$j++;
#endphp
<div class="item-answer center-block row">
<div class="sub-item-answer-num col-sm-1">{{$j}})</div>
#if($option->title)
<div class="sub-item-answer col-sm-11">
{!! $option->title !!}
#if($option->image_url)
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
#endif
</div>
#else
#if($option->image_url)
<div class="sub-item-answer col-sm-11">
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
</div>
#endif
#endif
</div>
#endforeach
</div>
#endif
<hr>
</div>
#endforeach
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: center;direction: rtl;">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">
</htmlpagefooter>
</body>
</html>
and I tried all methods in the documentation of mpdf and this answer but results were not useful
if any other solution exists please guide me
After lots of tries, the issue solved!
the page-break-inside: avoid; doesn't work when I have a loop of block elements
I used a table for every question and put it in the main table and in it's <td> tag, the inner table now has autosize="1" which was needed
also, add this config to mPdf
$pdf->shrink_tables_to_fit = 1;
I added page-break-inside: avoid to the main table and the <tr> of questions in the loop
note that if you faced undefined index error try to solve it generally! but if like me, it doesn't fixed use error_reporting(0);
the corrected blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:40mm 20mm 40mm 20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
p{
font-size:35px;
}
.sub-item-answer{
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer > img{
width: 100% !important;
min-height: 200px;
max-height: 500px;
}
.sub-item-answer-num{
width: 5%;
font-size: 35px;
}
.q_1{
margin-top: 45px !important;
}
.question-number{
padding: 20px !important;
background: #bebe27;
border-radius: 10px !important;
width:auto !important;
text-align: center;
color:#ffffff;
font-weight: bold;
height: auto;
font-size: 35px;
}
.main-question{
width: 95% !important;
font-size:30px;
}
.main-question > p{
font-size:30px !important;
}
.main-question > img{
width: 100% !important;
min-width: 800px !important;
max-width: 1000px !important;
min-height: 200px;
max-height: 500px;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
<table style="page-break-inside: avoid !important;">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<tr style="page-break-inside: avoid !important; min-height: 300px;">
<td>
<table autosize="1">
<tbody>
<tr>
<td><span class="question-number"> سوال{{$i}} </span></td>
<td class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</td>
</tr>
#if($question->options)
#foreach($question->options as $option)
<tr>
#php
$j++;
#endphp
<td class="sub-item-answer-num col-sm-1">{{$j}})</td>
#if($option->title)
<td class="sub-item-answer col-sm-11" style="font-size:35px !important;">
{!! $option->title !!}
#if($option->image_url)
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
#endif
</td>
#else
#if($option->image_url)
<td class="sub-item-answer col-sm-11">
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
</td>
#endif
#endif
</tr>
#endforeach
#endif
</tbody>
</table>
</td>
</tr>
#endforeach
</table>
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: left;direction: rtl; font-size: 15px; margin-top: 50px; padding-left:100px">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="width: 100%;">
</htmlpagefooter>
</body>
</html>
Use page-break-inside: avoid; for your block (see https://mpdf.github.io/css-stylesheets/supported-css.html)
Related
I currently have the problem that my maps my 9th map is displayed on two pages although there is still enough space on the first page. Does anyone have a suitable solution to the problem?
I tried anything: page-break-inside, page-break-before, page-break after. Anything does not work.
Picture: https://drive.google.com/drive/my-drive
index.blade snipped:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
#yield('third_party_stylesheets')
#stack('page_css')
<style>
.layout{
width: 100%;
height: 100%;
/*margin: 11mm 20mm;*/
margin-top: 10mm;
margin-bottom: 0;
margin-left: 25px;
}
.box {
/*border: 1px dashed black;*/
display: inline-block;
width: 87mm;
margin-top: -15px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: -1px;;
padding-top: 15px;
}
p {
text-align: right;
}
.card{
width: 85mm;
height: 55mm;
border: 1px solid black;
.pb {
page-break-inside: always;
}
</style>
</head>
<body class="layout">
#for( $i = 0; $i < 10 ; $i++)
<div class="box">
<div class="card">
....
</div>
</div>
#if($i % 2)
<br>
#endif
#if($i % 10 == 9)
<p class="pb" style="display: none;"></p>
#endif
#endfor
</body>
</html>
I want to refresh div content when looping is complete (scroll down and up). Right now im able to looping and refresh page, but the the effect is not smooth. The looping will stop and reset from the begining.
So, can i refresh my page (or if possible only refresh '') everytime 1 full cycle looping is complete?
here's my blade file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<style>
.alert-message {
color: red;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.columnl {
float: left;
width: 70%;
padding: 5px;
}
.columnr {
float: left;
width: 30%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
#header {
width: 100%;
height: 139px;
overflow: hidden;
}
#right_side {
height: auto;
background-repeat: repeat-y;
overflow: hidden;
position: absolute;
font-size: 16px;
}
#content {
height: 460px;
overflow: auto;
}
.inner {
position: relative;
top: 0px;
}
.outer {
overflow: hidden;
}
</style>
<body>
<div class="container">
<div id="header">
<h2 style="margin-top: 12px; text-align: center" class="alert alert-info">LANTAI</h2>
</div>
<div class="row" style="clear: both;margin-top: 18px;">
<div class="row">
<div class="columnl">
<div class="outer">
<div class="inner">
#foreach($poli_doctors as $poli_doctor)
<br>
<h4 class="card-header" style="font-weight:bold; text-align:center;color: blue">
{{$poli_doctor->nmdokter}} {{$poli_doctor->kddokter}}</h4>
<table id="tbl_antrian" class="table table-striped table-bordered">
<thead>
<tr>
<th style="font-weight:bold; font-size: 20px; text-align:center">ID Number
</th>
</tr>
</thead>
<tbody>
#foreach($vw_antrians as $vw_antrian)
#if($vw_antrian['kddokter']==$poli_doctor->kddokter)
<tr id="row_{{$vw_antrian['noantri']}}">
<td style="font-weight:bold; font-size: 20px; width:15%; text-align:center">
{{ $vw_antrian['noantri2'] }}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
#endforeach
</div>
</div>
</div>
<div class="columnr">
<div id="right_side">
<table>
<tr>
<th>Last Scan</th>
</tr>
<tr>
<td>{{$get_lastvalid->noantri2}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>
<script>
$(document).ready(function(){
setTimeout(function() {
location.reload();
}, 5000);
$('#tbl_antrian').DataTable();
});
function autoScrollDown(){
$(".inner").css({top:-$(".outer").outerHeight()}) // jump back
.animate({top:0},5000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
$(".inner").css({top:0}) // jump back
.animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp)
}
// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();
// location.reload();
</script>
</html>
I'm doing a project in Laravel in which student's certificate will be generated dynamically using Barryvdh DomPDF. This is my controller function:
public function certPdfGenerate()
{
ini_set('memory_limit', '-1');
$apply_id= input::get('id');
$get_certificate_data = DB::Connection('mysql1')->table('tbl_apply_certificate')->where('apply_id',$apply_id)->first();
$get_certificate_id1 = DB::Connection('mysql1')->table('tbl_apply_certificate')->select('apply_certificate_id')->where('apply_id',$apply_id)->get()->toArray();
foreach ($get_certificate_id1 as $key)
{
$get_certificate_id = $key->apply_certificate_id;
}
$filename = $get_certificate_id.'.pdf';
DB::Connection('mysql1')->table('tbl_apply_certificate')
->where('apply_id', $apply_id)
->update(['apply_pdf' => $filename]);
$data1 = [$get_certificate_data];
$pdf=PDF::loadView('students::htmlcertificate', array('data' =>$data1), [], ['format' => 'A4-L']);
$pdf->setPaper('A4', 'landscape');
$pdf->save(storage_path('certificates/'.$get_certificate_id.'.pdf'));
return $pdf->stream('htmlcertificate.pdf');
}
This is my view page :
<style type="text/css">
#certbackground
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate-back.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<div id="certbackground1">
</div>
</body>
The problem here is that the background image of pdf is too large in pdf. The size of background image is 3507 x 2480 with resolution 300. When I change the image size to 1058 x 748, it fits to pdf but the quality of pdf after print is too low.
How do we adjust the background image of pdf without losing clarity?
Dompdf, up through and including 0.8.4, does not support the background-size declaration (ref issue 463).
Since it looks like you want to contain the entirety of the image within the container you could try using a positioned image with a low z-index inside a relatively-positioned div. You would have to more precisely define the the positioning of the elements, but it should work for your example.
Here's a minimized demo that renders OK in Dompdf 0.8.4:
<div style="position: relative; border: 5px solid black; width: 450px; height: 375px; margin: auto;">
<img src="https://picsum.photos/200/150?grayscale" style="position: absolute; width: 450px; height: 375px; z-index: -1000;" />
<div style="position: absolute; top: 180px; width: 100%; text-align: center; color: white; line-height: 1.5"><span style="background-color: black; padding: .5em;">CONGRATULATIONS</span></div>
</div>
try this
<style type="text/css">
#certbackground
{
background-image: url('');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
padding: 300px 100px 10px 100px;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<img id="certbackground1" src="http://localhost/folder_name/public/cer_template/final-certificate-back.png" />
</div>
</body>
I'm creating the layout for export meeting details in PDF. there is a problem during layout. I want to display divs as a column. for example image display: flex not working, I'm trying table, table-cell, table-flex and table-grid but not working. Main content shifts down sidebar length.
My all blade html codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
<style media="screen">
#font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
#font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
#font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}
body { font-family: 'Roboto-Regular'; }
* { margin: 0; padding: 0; }
.sidebar {
position: relative;
left: 0.9cm;
width: 5cm;
}
.page-break-after {
page-break-after: auto;
}
body {
padding-top: 3cm;
padding-bottom: 100px;
}
.wrapper {
position:relative;
width: 21cm;
display: table;
}
</style>
</head>
<body style="background: url({{ url('pdf-export-background.png') }});background-size: 100% 100%;">
<div class="wrapper">
<div class="sidebar" style="">
<p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>
<!-- List Item -->
<p style="margin-top: 15px;">
<h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
<span style="border-bottom: 1px solid #000;">Düzenleyen</span>
</h4>
<p style="padding-left: 5%;">
<span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span>
<span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
</p>
</p>
<!--#List Item -->
</div>
<div style="position: relative;width: 5.7cm;">
THE MAIN CONTENT
</div>
</div>
</body>
</html>
Dompdf does not support flexbox as of this writing (current release is 0.8.4). Refer to issue 971 for more information.
You can generate that layout with a variety of stylings, but if your content goes beyond a page in length you'll run into some quirkiness around the Dompdf rendering process. I'd suggest floating the sidebar to the left and set a left margin on the main content.
Something like this:
<div>
<div style="float: left; width: 25%; height: 80%; background-color: #cc6633;"></div>
<div style="margin-left: 35%; width: 65%; height: 80%; background-color: #3366cc;"></div>
</div>
so im trying to print a pdf with table inside is something like an invoice using HTML/CSS and im calling the data using laravel php. so what i trying to achieve as in this
but until now what i can do is like this
my code is as below:
<style>
* {
margin:0;
padding:0;
font-family: 'Muli' !important;
}
html{
font-family: 'Muli' !important;
padding: 0;
}
body{
padding: 20px;
background-color: #fff;
}
header{
width: 100%;
border-bottom: 1px solid #1f1f1f;
position: fixed;
height: 80px;
padding: 20px 20px 0px;
margin-bottom: 0px;
}
header .address{
width: 50%;
display: inline-block;
vertical-align: middle;
}
header .address p{
color: #6a6a6a;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
header .logo{
width: 49%;
display: inline-block;
vertical-align: top;
}
header .logo img{
padding-top: 10px;
float: right;
height: 50%;
}
.pagenum:before { content: counter(page); }
footer{
position: fixed;
bottom:80px;
}
footer p{
text-align:right;
padding: 15px;
color: #6a6a6a;
font-size: 10px;
}
.details{
margin-top: 100px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section .title {
font-weight: 500;
text-transform: uppercase;
margin-top: 20px;
padding: 8px 10px 10px 20px;
background-color: #5b5b5b;
color: #fff;
}
.new-section .details {
margin-top: 10px;
}
table{
width: 100%;
}
table thead tr th{
padding: 15px;
font-size: 14px;
font-weight: lighter;
}
table thead tr th:last-child{
text-align: right;
}
table tr td{
padding: 15px;
vertical-align: top;
border-top: 1px solid #b9b9b9;
}
table tr td:last-child{
text-align: right;
}
table tr:last-child td{
border-bottom: 1px solid #b9b9b9;
}
table tr td .receipt-image{
width: 100%;
height: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
table tr.detail-section td {
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
table thead tr th{
padding-top: 120px;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expense Report as of {{date('Ymd:His')}}</title>
<link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<?php
$total_amount = 0;
$total_reimubursable = 0;
$currency = '';
// $path = public_path(preg_replace('/public/', '', $company->company_logo));
$path = public_path('/uploads/header.jpg');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
?>
<body>
<header>
<div class="address">
<p>{{nl2br($company->company_address)}}</p>
{{-- <p>Digi Telecommunications Sdn Bhd</p>
<p>Lot 10, Jalan Delima 1/1</p>
<p>40000 Shah Alam, Selangor, Malaysia</p> --}}
</div>
<div class="logo">
<img src="{{$base64}}" alt="alt.expense">
</div>
</header>
<footer>
<p>Generated by alt.hr on {{date('d/m/Y') }} <br>
Page: <span class="pagenum"></span></p>
{{-- <p>Email: support#alt.hr</p> --}}
</footer>
<div class="details">
<p>Name: {{$user->name}}</p>
<p>Employee ID: {{$user->employee_id}}</p>
<p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
<p>Report Type: Self</p>
</div>
#foreach($expenses as $expense)
<?php
$total_amount += $expense->total_amount;
$currency = $expense->currency ? : $expense->type->currency;
?>
#endforeach
<div class="new-section">
<div class="title">
Expense Claims Summary
</div>
<div class="details">
<p>Total Claims : {{count($expenses)}}</p>
<p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
</div>
</div>
<div class="new-section" >
<div class="title">
Transactions
</div>
<div class="details">
<table cellpadding="0" cellspacing="0" style="page-break-before : always;">
<thead>
<tr>
<th>Transaction ID</th>
#if($dateFilter == 'invoice_date')
<th>Submitted Date</th>
#elseif($dateFilter == 'submitted_at')
<th>Invoice Date</th>
#else
<th>Submitted Date</th>
<th>Invoice Date</th>
<th>Reviewed Date</th>
#endif
<th>Expense Type</th>
<th>GST Amount({{$currency}})</th>
<th>Total({{$currency}})</th>
</tr>
</thead>
<tbody>
#foreach($expenses as $expense)
<tr style="background-color: #efeff0;">
<td>{{$expense->ref_no}}</td>
#if($dateFilter == 'invoice_date')
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
#elseif($dateFilter == 'submitted_at')
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
#else
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
<td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
#endif
<td>{{$expense->title}}</td>
{{-- <td>{{$expense->user->name}}</td> --}}
<td>{{number_format($expense->gst, 2, '.', '')}}</td>
<td>{{$expense->total_amount}}</td>
</tr>
#if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->description}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->mileage_amount != '0.00')
<tr class="detail-section">
<td>Mileage Total</td>
<td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->toll_amount != '0.00')
<tr class="detail-section">
<td>Toll</td>
<td>{{$currency}} {{$expense->toll_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Parking</td>
<td>{{$currency}} {{$expense->parking_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->travel_id)
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->travel->description}}</td>
<td colspan="2"> </td>
</tr>
<tr class="detail-section">
<td>Tagged TR</td>
<td>
#foreach($expense->travel->travel_data as $leg)
#if($leg->removed)
#continue
#endif
{{$leg->title}} <br>
#endforeach
</td>
<td colspan="2"> </td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
as you can see the table is not displaying where it should be but instead skipping the whole first page and starting on the next page. i need it to print on the first page. how can i do that? my code as below
Well, you use style="page-break-before:always;" on yout table, so of course a page break will be inserted before your table. Just remove this styling and it should work.