Comments (27)
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]
todisplay: table;
and[data-field-span]
todisplay: 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 asmin-height
for tables.
- FYI,
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
- 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}
- 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 input
s, and to handle multiline content:
- Set
[data-row-span]
todisplay: table;
and[data-field-span]
todisplay: 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 asmin-height
for tables.
- FYI,
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.
Related Issues (20)
- [feature-request] Validation errors HOT 4
- redirected input on InternetExplore HOT 1
- jquery dependency HOT 2
- zepto compatibility
- gridforms.sass fails to load with webpack/sass-loader HOT 5
- "dist" versions
- Rowspan > 1
- support for dynamically added elements HOT 5
- Dont use deprecated jquery property
- Reduce public api
- Field alignment (in a straight line) problem in a single row HOT 1
- Hover CSS is taking precedence over focus HOT 3
- Ability to sort Data Tables HOT 1
- increase text input field target size to cover entire grid cell for clicks/taps HOT 1
- Tooltips on Label fields HOT 1
- Inline class
- Right Border Does Not Carry Down With Cells At Different Heights HOT 2
- Changing checkbox label weight when checked HOT 1
- Issue with the field not adjusting their height causing the border to not display on the whole field
- npm release is behind: 1.0.6 vs 1.0.10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridforms.