Use with WickedPDF or PDFKit. about gridforms HOT 27 CLOSED

Really nice to hear that! And I love the idea of generating PDFs with GridForms.

It's a hard one to debug without the inspector. But if I were to guess, it's the viewport media query kicking in. I would try removing the media query in the CSS and try again.

Love this btw, hope it works out 👍

from gridforms.

Awesome, I'll give that a looky and let you know. If I come up with something straight forward, I'll update the README with a little blurb and send you a PR.

from gridforms.

@joshuapinter did you ever have any luck with this? I'm running into the same issue. I'm pretty new to sass so I'm having trouble figuring out what to remove to prevent the media queries from kicking in.

from gridforms.

@blaedj I haven't pursued it yet, actually. Just taking a cursory glance, it looks like you'll want to play with the breakpoints calls, as they transform into the "media queries" that determine what CSS to use at different widths.

I'll need this eventually so let me know how it goes.

from gridforms.

I'll take a look tomorrow and let you know, thanks!

from gridforms.

@joshuapinter
Ok I was able to go from something like the screenshot you posted above to this:

I created a separate version of the gridforms.sass file that I use when generating the pdf, and made the following changes (using scss):

$font-size-large: 12px;  /** normally 18px */
$field-padding: 4px;     /** normally 8px  */
$label-font-size: 8px;   /** normally 10px */

/** Removed width: 100%, could probably tweak the breakpoints but I didn't have
 any luck regardless of the size I used */

[data-field-span] {
      padding: $field-padding;
      float: left;
      @include _breakpoints(0, 700px) {
        border-bottom: 1px solid $grid-border-color;
        /** width: 100% !important; */
      }
}

There's still some work to be done, but it's a good start for what I need.
@kumailht Thanks for the great library!

from gridforms.

@blaedj Nice one!! Thanks for sharing back. That's a great start.

from gridforms.

Great stuff @joshuapinter and @blaedj!

I would find this very useful as well. What are the steps I have to take to get a PDF file with a GridForm on it?

from gridforms.

@kumailht A few different ways but it's super easy with WickedPDF as it renders HTML and CSS and then generates the PDF from that. Take a look at their readme for the usage.

from gridforms.

Hey @kumailht, we finally got around to getting GridForms working in PDF form and wanted to share our tweaks and see what your thoughts were on how, if at all, you wanted to incorporate it into the main library.

First off, I love this library. It made our printed forms look effortlessly beautiful. Thanks for sharing this with the world.

Here's what we were able to create:

So, onto the changes. I created a simple DIFF to show the differences between the original gridforms.sass and our modified version:

kumailht/gridforms@master...joshuapinter:patch-1

Here are the main points:

• Remove the letter-spacing: 1px on the labels.
  • It was causing them to separate more like 10px. Nothing could fix this.
• Comment out the breakpoints.
• Set [data-row-span] to display: table; and [data-field-span] to display: table-cell.
  • This allows for multi-line content and have the "cells" expand their height as necessary.
  • We're not using <input> tags for the content, we're using plain text or <p> tags.
• Set height: 56px to the [data-row-span] to ensure even with no content it looks good.
  • FYI, height works as min-height for tables.

That's about it so let me know if you're keen to incorporate this into GridForms, and how, and we'll clean this up and generate a proper PR for you.

Thanks again.

from gridforms.

@joshuapinter I quite like the output and would be happy to integrate this with GridForms.

Have you tried generating the PDF using the wkhtmltopdf (wkhtmltopdf.org) command line utility? I am interested in knowing if the CSS would need tweaking to work with it.
wkhtmltopdf http://path/to/gridforms.html gridforms_output.pdf

from gridforms.

IMO, the process for PDF generation should be as painless for the end user as possible. Preferably a one-liner that requires little to no configuration.

from gridforms.

Yup, I agree. My thinking is either a one-liner config setting OR override some CSS when printing.

Just like I found, using the wkhtmltopdf command line generates a similar, unusable result. For example, your bank application page produces the following:

wkhtmltopdf http://kumailht.com/gridforms/example.html ~/Downloads/gridforms_output.pdf

Let me take a look at it and I'll see if I can clean it up for a PR.

from gridforms.

@joshuapinter Do you get the same broken output with your customised CSS?

from gridforms.

Nope, you get a beautiful output, like the sample I posted previously. But, the CSS changes we made break the web-view of it.

from gridforms.

Here is my attempt at generating a WickedPDF like output with wkhtmltopdf, but this was the best I could do: output.pdf

If we can get a reliable PDF output using a customised version of the CSS file, we could add that custom version to the project. Is that what you had in mind as well?

from gridforms.

Yep, that's what I was thinking as well. Your version looks pretty good. Let me play with it a bit and see if we can get a reliable, good looking CSS that works with WickedPDF and wkhtmltopdf.

Thanks for following up! :)

from gridforms.

Thanks Joshua!

from gridforms.

Alright so the second round of experiments worked out a much better result!
output.pdf

1. You can reproduce the output by setting a width on the container element and removing the letter spacing:

body {width: 1000px}
.gridforms label:first-child {letter-spacing: 0 !important}

1. Stop the mobile layout from kicking in by passing in a viewport:

wkhtmltopdf --viewport-size 1000x2000 gridforms.html output.pdf

from gridforms.

Oh nice one, @kumailht! That looks fantastic.

So the only thing not accounted for with these changes is handling multi-line content in each cell instead of a form input element. That's where I had to change the display types and set a height on the row that acts as a default height.

If all you want to do is print an empty form for someone to fill out then your changes do the trick. If you're looking to use it as a way to organize information, then it breaks down with multi-line content.

What do you think?

from gridforms.

Excellent point @joshuapinter. Question, would a few more lines of CSS be enough to make the PDF generation work for forms with content?

from gridforms.

I think so, but I'm not sure how it affects it for web rendering. Maybe you can test it. Here are the two changes I had to make to make it work with content, not inputs, and to handle multiline content:

• Set [data-row-span] to display: table; and [data-field-span] to display: table-cell.
  • This allows for multi-line content and have the "cells" expand their height as necessary.
• Set height: 56px to the [data-row-span] to ensure even with no content it looks good.
  • FYI, height works as min-height for tables.

The first one is a fairly large layout change but see what it looks like.

from gridforms.

I have two solutions in mind:

• A CSS class on the container level that overrides some of the styles to make PDF generation possible.
• A Readme file with step by step instructions with the CSS styles overrides mentioned here

Happy to hear if you have any ideas or if you prefer one of the above over the other

from gridforms.

Even better, you can use a @media print scope to only set certain styles when printing and wkhtmltopdf has a command line option for ensuring the media type is "print": --print-media-type.

I added the following styles under the =grid-form of gridforms.sass:

@media print
    [data-row-span]
        display: table
        height: 56px
        page-break-inside: avoid

        [data-field-span]
            border-right: 1px solid #333333
            display: table-cell
            float: none

            &.focus,
            &:hover
                background: none 

            label:first-child
                letter-spacing: 0

And ran the following wkhtmltopdf command in the console:

wkhtmltopdf --print-media-type 'Grid Forms · Example - Personal Bank Account Initial Application.html` ~/Downloads/myoutput37.pdf

And here is the result:

By the way, wicked_pdf, which is the nice Rails wrapper for interacting with wkhtmltopdf, has a configuration option that is easily set as print_media_type: true to ensure --print-media-type is passed in the command line. Works like a charm.

I'll generate a quick PR with these changes to gridforms.sass so we have something to build from.

Let me know what you think.

from gridforms.

That's an excellent solution, I love it!

Just one questions, does this render well when you try to print (the traditional 'ctrl + p' print) it?

from gridforms.

Yup!

from gridforms.

Great job on the feature Joshua. I'll definitely be using this big time and pretty sure it will be popular among the community!

Will test and merge your pull request soon.

from gridforms.