barryvdh/laravel-dompdf large white space problem

@boby can you add a red border around your divs and resupply your screengrab?

also can add the css that you are using to this thread too?

@automica

here is the border version:

https://www.dropbox.com/s/4wsixx1p8lujshk/offer1.png?dl=0

Css file:

* {
    font-family: "DejaVu Sans";
}
html {
    margin: 0;
}
body {
    font-size: 12px;
    margin: 30px;
    border: solid red;
}
body, h1, h2, h3, h4, h5, h6, table, th, tr, td, div {
    line-height: 1.1;

}

/* HEADER */
.header {
	height: 100px;
	border: solid red;
}

.logo {
	margin-top: 5px;
	border: solid red;
}

.invoice-user-details p{
	text-align: right;
    margin-bottom: 0.1rem; 
}

.invoice-customer-details {
    width: 300px;
    border: solid red;
}

.invoice-details{
	text-align: right;
	border: solid red;
}

hr {
	margin-top: 0rem;
}
/* END HEADER */

/* OFFER TITLE */
.offer_title,
.invoice_title  {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    border: solid red;
}
/* END OFFER TITLE */

/* CONTENT */
.invoice-articles-table {
    padding-top: 0px;
    padding-bottom: 50px;
    border: solid red;
}

.invoice-articles-table tbody {
	font-size: 10px;
}

.invoice-amounts{
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    border: solid red;
}

.invoice-amounts p{
    margin-bottom: 0.5em;
}

/* END CONTENT */

/* FOOTER */
footer {
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
    right: 0px;
    height: 70px;
    margin: 30px;
}

.foo1 {
	text-align: left;
}

.foo1 p, .foo2 p, .foo3 p{
    margin-bottom: 0.1em; 
}

.foo2 {
	text-align: center;
}

.foo3 {
	text-align: right;
}

.pagenum:before {
    content: counter(page);
}

.page-break {
    page-break-before: always;
}
/* END FOOTER */

Update:

when I remove this part from my blade, it is ok then:

	  			<div class="col-sm invoice-details">
	  				<p><b>AN0001/2020</b></p>
	  				<p>12.10.2020</p>
	  				<p>24.10.2020</p>
	  				<p>Customer Nr.: 0001</p>
	  			</div>

I guess that you use there floating

so here add css property clear

<div class="container content" style="clear: both;">

Move it to css of course.

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

@michaloravec I am not using float, check css file above.

Adding clear didn't work :(

<div class="col-sm-12 invoice-details">
	  				<p><b>AN0001/2020</b></p>
	  				<p>12.10.2020</p>
	  				<p>24.10.2020</p>
	  				<p>Customer Nr.: 0001</p>
	  			</div>

try to use a specific number for col-sm or col-md

@boby if this is bootstrap then it will be using floats for columns.

As this is for PDF if would instead not use row or columns for those elements and use fixed positioning for invoice details element or specify a fixed height for the row those 2 elements are in.

When I last used dompdf I remember it didn’t support css3 and so you might need to get a bit ‘creative’ with your styling.

@raheelkhan

that didn't help :(

@automica

I will definitely try to investigate this with bootstrap, that might be the reason.

@boby you might be able to fix this by replacing

col-sm 

With

col-sm-6

For both elements in this row and that should make 2 equal columns (which @raheelkhan was suggesting).

Hopefully you’ll crack it pretty soon though

Interestingly sm-6 put my divs next to each other, but I want 2nd to be on very right. I used sm-auto instead and that is ok for alligment, but still have to solve this white space.

<tr class="row">
	<td class="col-sm-6 invoice-amounts">
		<p>Total: 0.00 &euro; </p>
		<p>Tax 20%: 0.00 &euro; </p>
		<p>Grand Total: 0.00 &euro; </p>
	</td>
</tr>

try this

or you can also go with custom CSS like width and alignment properties.

@boby perhaps add another class on the wrapping row and then apply a fixed height to that?

It’s a shame that package hasn’t had an update. I have found wkhtmltopdf is more reliable to style. Look at snappy as a good package for that in the future.

@automica I also switched from dompdf to snappy and wkhtmltopdf and found it to be faster and more reliable.

Only one issue, on local my margins are perfect, on my production server the page margins are negligible!

Next time, I'm going to build in the cost of a PDF service and hopefully save me hours and hours of 'fiddling'