Use with WickedPDF or PDFKit.

[joshuapinter]

First off, fantastic little project. I think these forms are the sexiest I've come across and make entering data (almost) fun.

I'm trying to use Gridforms with WickedPDF to generate a 1-page printable form but the width of the form seems to be messed up.

With the following default markup:

<form class="grid-form">
    <fieldset>
        <legend>Form Section</legend>
        <div data-row-span="2">
            <div data-field-span="1">
                <label>Field 1</label>
                <input type="text">
            </div>
            <div data-field-span="1">
                <label>Field 2</label>
                <input type="text">
            </div>
        </div>
    </fieldset>
</form>

It produces something like this in the PDF:

I'd love to be able to generate PDFs using Gridforms. I'm sure others would too.

Any thoughts on this?

Many Thanks!

Josh

[kumailht]

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 👍

[joshuapinter]

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.

[blaedj]

@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.

[joshuapinter]

@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.

[blaedj]

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

[blaedj]

@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!

[joshuapinter]

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

[kumailht]

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?

[joshuapinter]

@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.

[joshuapinter]

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.

[kumailht]

@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

[kumailht]

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.

[joshuapinter]

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.

[kumailht]

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

[joshuapinter]

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

[kumailht]

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?

[joshuapinter]

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! :)

[kumailht]

Thanks Joshua!

[kumailht]

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

[joshuapinter]

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?

[kumailht]

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

[joshuapinter]

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.

[kumailht]

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

[joshuapinter]

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.

[kumailht]

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?

[joshuapinter]

Yup!

[kumailht]

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.