Multi Column CSS not working with wkhtmltopdf (createPDF V1.09)

8 posts by 3 authors in: Forums > CMS Builder
Last Post: December 29, 2018   (RSS)

By gkornbluth - December 25, 2018 - edited: December 25, 2018

Hi All,

I'm generating a large number of wall labels for an art exhibition whose theme is newspaper headlines and I'm trying to generate multi column PDF's for printing.

Has anyone succeeded in using the CSS3 columns: or column-count: multi column tags with createPDF (V1.09)?

The source web page displays correctly but the PDF reverts to a single column.

I know there's been some discussion on the web (with no apparent solution), but I'd love to use an alternative approach if using CSS columns: or column-count: isn't possible with the createPDF plugin.

Thanks,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

PDF takes the print version of a page, I’ve struggled especially when working with bootstrap css and having to remove the print version in the core css. 

How about reverting to a table rather than css columns?

Cheers,

Tim (toledoh.com.au)

By gkornbluth - December 25, 2018 - edited: December 25, 2018

Hey Tim,

Season's greetings, and thanks for looking at this and responding.

I guess that using tables would be possible.

Any thoughts about how I could maintain the dynamic nature of the columns with tables?

Do you think Divs would work as well?

The great thing about the CSS is that it does the heavy lifting in terms of automatically balancing out the column heights, etc.

Best,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

I expect diva will work, maybe google pure css grids and copy a solution that doesn’t use columns? 

When testing , use a standard php page and print preview via the browser as this will show the print layout that the PDF should show. 

I personally would still use tables and do a max-cols type loop for each table row. 

Cheers,

Tim (toledoh.com.au)

Thanks again,

I'll give it a try.

If anyone has done this and is willing to share code, that would be great

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By daniel - December 27, 2018 - edited: December 27, 2018

Jerry, 

Unfortunately, in my testing, it appears that wkhtmltopdf simply doesn't support CSS columns. The best alternative method for creating columns will depend a bit on what sort of content you're trying to display. It sounds like you might just be trying to dynamically split text across columns? If that's the case, I'd suggest first trying something like a jQuery plugin (one I just found: https://welcome.totheinter.net/columnizer-jquery-plugin/) - wkhtmltopdf is able to handle some JavaScript, so this may be your best first bet.

Let me know if that helps, or if you have any questions.

Thanks!

Daniel
Technical Lead
interactivetools.com

By gkornbluth - December 29, 2018 - edited: December 29, 2018

Hi Daniel, Tim,

Columnizer is indeed an interesting plugin. Thanks for bringing it to our attention. I'm sure it will be very useful down the road.

I  also took a look at tables and divs as well, but because of issues with wrapping text around images and time limitations, I ended up going with single column PDF printouts.

Best to both of you for the new year!

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php