I am trying to convert a products gallery images into PDF using dompdf
, but it overlaps images instead of showing them on next line (for the solution, I tried <br>
also but did not work for me)
if(isset($data) && count($data)>0){ $html="<link rel='stylesheet' href='".get_template_directory_uri()."/assets/css/woocommerce.css'>"; $html.="<link rel='stylesheet' href='".get_template_directory_uri()."/style.css'>"; $html.="<div style='text-align: center;'><h1>".$project_title."</h1><span><h3>".$project_sub_title."</h3></span></div>"; $html.='<div id="pdf_main"><ul class="products clearfix products-3 pdf_class">'; $counter=1; while ($data = mysql_fetch_assoc($result)) { $html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom instock shipping-taxable purchasable product-type-simple"> <img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog"> </a> <div class="product-details"> <div class="product-details-container"> <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3> </div> </div> </li>'; } $html.="</ul></div>"; $options = new Options(); $options->set('isRemoteEnabled', true); $dompdf = new Dompdf($options); $dompdf->loadHtml($html); $dompdf->setPaper('A4', 'portrait'); $dompdf->render(); $dompdf->stream('Products.pdf'); $output = $dompdf->output(); }
Here is css
.products li.product { background-color: transparent; } .products-3 > li:nth-child(3n+1) { clear: both; content: " "; display: block;} .products li { border-color: #ebeaea;} .products-3 > li { float: left; margin-bottom: 11px; margin-right: 1%; width: 32.6%;} .products > li { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #efefef; border-image: none; border-style: solid; border-width: 1px 1px 2px;} .product { position: relative;}
See 4th image is half cut and also 5th is not showing, in my css i am clearing float after 3rd products but its not working and over lapping the images
Advertisement
Answer
After lot of dubbing i came to know that <li>
was getting auto with that is why it was over lapping. I gave it fixed width and it was working and showing perfect grid
$html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom instock shipping-taxable purchasable product-type-simple"> <img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog"> </a> <div class="product-details"> <div class="product-details-container"> <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3> </div> </div> </li>';