node-html-pdf
node-html-pdf copied to clipboard
marcbachmann
Flexbox layouts don't work
I am using Stylus to generate the CSS for my web page. When I enable flexbox layout (flexbox=true), nothing is rendered by node-html-pdf, but Chrome displays the page fine. When I disable flexbox layout, node-html-pdf and Chrome render the same output.
Flexbox works fine if you use Phantom JS 2.0 instead of 1.9 (the standard dependency). 1.9 used an old syntax of flexbox.
@Lichtjaeger thanks for the hint.
I'll integrate phantomjs 2 in this module as soon as it's stable on all platforms. That's also the case for the phantomjs module on npm. So we can simply switch the npm module.
Until then you can use the phantomPath config option and use your locally installed phantomjs 2.
Yes, I can confirm that it works when I install 2.0 and set the phantomPath option to point to the new location
On Apr 20, 2015, at 2:39 AM, Marc Bachmann [email protected] wrote:
@Lichtjaeger thanks for the hint. I'll integrate phantomjs 2 in this module as soon as it's stable on all platforms. That's also the case for the phantomjs module on npm. So we can simply switch the npm module. Until then you can use the phantomPath config option and use your locally installed phantomjs 2.
— Reply to this email directly or view it on GitHub.
@jdidion hey how to install phantomjs 2? , i cant find a npm package for this
@ripper2hl you have to install the binary yourself. You can use apt-get install, brew or a docker container.
Thanks for the update!
On Feb 16, 2016, at 5:41 PM, Marc Bachmann [email protected] wrote:
[email protected] now uses phantomjs v2. Have fun
— Reply to this email directly or view it on GitHub https://github.com/marcbachmann/node-html-pdf/issues/24#issuecomment-184904393.
Flexbox,colors and shadows are not working . Pls find the attached input and output files.
Yes, they broke support in version 2.1.1 in PhantomJS. ariya/phantomjs#14793
I tried so many different modules and finally gave up. Flex box and z shadows aren't supported.
On Tuesday, April 11, 2017, Taylor Stine [email protected] wrote:
Is there a work around for this?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.< https://ci6.googleusercontent.com/proxy/korkejQ9CDUUjOLhuBJ4wRfk1FBEWfUF6JoSfCeHoO_3pSEHK4SXLS8EIKn4AnJ5J-t8hzhMGyQphEUfFVo-Cm196yusPXeVmc2loQasCBR0nPIzU6zk9y1Y9dk_IeFTtg6CzexR8rtb04jjCnkbBskWHuGOkw=s0-d-e1-ft#https://github.com/notifications/beacon/AP-IYWdojP09ZoD2Xt8szH0NkeLC9yWHks5ru_K3gaJpZM4EDzw3.gif>
Flexbox works when you use autoprefixer v6, but after upgrading to v7, it broke for some reason. With v6, you need to specify this in your package.json:
{
...
"browserslist": [
"Safari >=4"
]
}
display: flex + flex-wrap: wrap works in this way:
display: -webkit-box
display: -webkit-flex
-webkit-flex-wrap: wrap
display: flex
flex-wrap: wrap
Order matters!
display: -webkit-box display: -webkit-flex -webkit-flex-wrap: wrap display: flex flex-wrap: wrap
Yes, so flex works, but justify-content doesn't work!
Use https://github.com/Szpadel/chrome-headless-render-pdf
It's based on chrome headless, and gives much better results. I started having problems with this library when running an older project. The phantomjs dependency was just not installing, and when installed, it complained about path not being correct, etc... It became too much of a hassle to fix it so I switched to the library using chrome-headless, and it was a breeze! Plus, that library is based on this one, so the API is nearly the same.
The order property of flex didn't work and so didn't autoprefixer prefixed it for me.
After adding -webkit-order it works!
* I figured out autoprefixer didn't work just because I was using inline styles in React.
For me autoprefixer are working just fine. Just use Autoprefixer CSS Online to generate css with vendor prefixes and use them. I am using inline css in a simple html file.
{ flex: 1; } is still not working for me. I am stuck. I even have tried Autoprefixer CSS online
{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
@amaneer94 try using { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } instead?
I had trouble getting justify-content to work even with autoprefixer, but based on a phantomjs issue i stumbled upon (https://github.com/ariya/phantomjs/issues/14365) adding safari >= 4 to my autoprefixer settings seem to fix it.
You can test it on Autoprefixer CSS online my inputing safari >= 4 in the browserlist field.
display: -webkit-box display: -webkit-flex -webkit-flex-wrap: wrap display: flex flex-wrap: wrap
Yes, so flex works, but justify-content doesn't work!
I got justify, align, and direction working with: -webkit-justify-content: center, -webkit-align-items: center, -webkit-flex-flow: column
display: -webkit-box;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex-flow: column;
flex not working for me anyone can help?
Help, the bootstrap flex layout isn't work. Any solution? Any alternative?
Help, the bootstrap flex layout isn't work. Any solution? Any alternative?
you can write your own css styles but using prefixing : -webkit-justify-content: value;, -webkit-align-items: value;, display: -webkit-box; display: -webkit-flex; these worked for me under ExpressJS
you can use this site to convert https://autoprefixer.github.io/ for example flex not working go to the site write {display:flex} on left box and you get { display: -webkit-box; display: -ms-flexbox; display: flex;} its really cool.
