multiple column div in a parent div give wrong pdf

28 views
Skip to first unread message

Service Delight

unread,
May 28, 2022, 12:21:19 PM5/28/22
to wkhtmltopdf General
Hello all,
I am new to such group.
I am learning html, css, Django, Python.

I have business in making identity cards.
I want to use your wkhtmltopdf tool.
As I used it on my trial html which has an A3 size parent div. It contains 25 credit card size child div. I have used css multicolumn to flow the div into five columns.
This arrangement fills up the Parent div properly with 25 cards.
The chrome pdf converter converts the file to pdf properly.
But when I use wkhtmltopdf tool, the multicolumn is not respected. I get on long column of divs in pdf.
For your analysis, I want to submit the actual html and pdf. But I cannot see any attachement facility in this email.
Thanks in advance.
I would like to contribute in some way if you can help in improving your tool. Please tell me the expense before you do it for me.

Rajeev Sahasrabudhe
Pune, India

I am pasting the html code here.
I hope it helps.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  /* 4 mm padding means 15 pixels on all sides */
  background-color: lightgrey;
  width: 295px;
  height: 178px;
  border: 2px solid green;
  padding: 15px;
  margin: 0px;
}

.parentDiv{
  column-gap: 0px;
  column-fill: auto;
  column-count: 5;
  background-color: none;
  width: 1645px;
  height: 1060px;
  border: 20px solid green;
  padding: 15px;
  margin: 0px;
}

.tohide{
  display: none;
}
</style>
</head>
<body>
<div class="tohide">
  <h2>Demonstrating the Box Model</h2>
  <h3>3.7795275591 pixels is 1mm</h3>
  <h3>87mm by 56mm is  328.81889764 by 211.65354331 we are taking it as 329 and 212 pixels</h3>
  <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

</div>
<div class="parentDiv" >
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>This text is the content of the box. We have added a 0px padding, 0px margin and a 0px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

</body>
</html>

Jonathan Rynd

unread,
May 28, 2022, 4:36:51 PM5/28/22
to wkhtmltop...@googlegroups.com
wkhtmltopdf may not be updated yet with all the latest CSS changes. You might have better results by using Chrome from the command line in headless mode to generate the PDFs, as shown here: https://developers.google.com/web/updates/2017/04/headless-chrome

--
===================================================
You received this message because you are subscribed to the "wkhtmltopdf General" group.
To post to this group, send email to wkhtmltop...@googlegroups.com
To unsubscribe from this group, send email to wkhtmltopdf-gen...@googlegroups.com
 
For more options, visit this group at
http://groups.google.com/group/wkhtmltopdf-general?hl=en?hl=en
---
You received this message because you are subscribed to the Google Groups "wkhtmltopdf General" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wkhtmltopdf-gen...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/wkhtmltopdf-general/49bbd019-9dbb-45e1-ac73-fa72cf962ec1n%40googlegroups.com.


--

Jonathan Rynd

Senior Software Engineer

Wunderkind

wunderkind.co


Reply all
Reply to author
Forward
0 new messages