search

adamwulf / Columnizer-jQuery-Plugin

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use!
http://welcome.totheinter.net/columnizer-jquery-plugin/
Other
760 stars 148 forks source link

Strange Page Spacing On Page & Printing #231

Closed Geowil closed 4 years ago

Geowil commented 4 years ago

Hello, we are trying to use your plugin as part of a documentation system for previewing and printing dynamically created documents based on our server data. We are running into some issues though and have not been able to resolve them thus far.

Some environment information: website language: ASP/VB.Net Other Major Plugins: Telerik Web UI

So, we have copied over the Sample 10 page and have started editing it to see how we can manipulate it and how various properties impact how it is displayed and printed. We instantly ran into issues with the copied example. I have some images of the problems.

columnizer_page_header_issue

This image shows that the first "page" has no content in it, just the header and footer. We are also seeing that as we scroll down the page, the header line is moving with the page instead of staying in place. We have assigned a height and width for standard legal paper - the header and footer space (8.5x11 [2550px x 2000px]) and set it to 1 column but the plugin is not adjusting the content properly. It thinks there are only 2 pages instead of the number there should be.

When we go to print the page we are also seeing issues highlighted by the two images below:

columnizer_page_header_issue_print1 columnizer_page_header_issue_print2

If we print to a printer or to the Micrsoft PDF Printer that we normally use to save the documentation we are making manually now, we see the same issues as in the preview images above.

Can you offer any insight into how we can resolve these issues? We are using Chrome V76.

Thank you.

adamwulf commented 4 years ago

It appears that you have other CSS that's not cooperating with the columnize layout.

We are also seeing that as we scroll down the page, the header line is moving with the page instead of staying in place.

This suggests that the header is getting a CSS fixed position, which would cause it to move with the scroll. What other CSS do you have loading on the page?

Geowil commented 4 years ago

Hello Adam,

You are correct. When we set up a blank ASP page without our master page included in it and stripped out all of the Telerik script file definitions your plugin started working. We also solved the blank page header problem by using display:none on the header template div block.

Most of the issues I reported when viewing the page have been fixed. One that has not is content width. How can we restrict this using a single column format? We have tried using a content_width var within the overflow section, like the sample has content_height, but that did not prevent the content from taking up the entire browser window space.

We still have the printing issues too. Either when printing to a PDF or sending a print job to a printer, the page content takes up 5 pages instead of two. We have the content_height set to 1800px to account for the header and footer we are using and are printing to standard 8.5"x11" paper.

Do you have any suggestions? Changing the content_height doesn't seem to make any difference.

Thanks.

Geowil commented 4 years ago

Adam,

We solved it. We had to apply a style to all p tags and set the width there and then we added a page break to the header template. Everything is working as expected now.

Thanks your your help.

adamwulf commented 4 years ago

Glad to hear you got it sorted!