Flexbox layouts don't work about node-html-pdf HOT 29 OPEN

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!

from node-html-pdf.

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

from node-html-pdf.

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"
  ]
}

from node-html-pdf.

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!

from node-html-pdf.

@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 (ariya/phantomjs#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.

from node-html-pdf.

[email protected] now uses phantomjs v2. Have fun

from node-html-pdf.

Is there already a fix for this?

from node-html-pdf.

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.

from node-html-pdf.

Guys i find another project that works perfectly with flexbox html-to-pdf

from node-html-pdf.

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.

from node-html-pdf.

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

from node-html-pdf.

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.

from node-html-pdf.

@jdidion hey how to install phantomjs 2? , i cant find a npm package for this

from node-html-pdf.

@ripper2hl you have to install the binary yourself. You can use apt-get install, brew or a docker container.

from node-html-pdf.

Okay, thanks very much !!

from node-html-pdf.

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 #24 (comment).

from node-html-pdf.

hi flexbox ins't supported.
I use recent version of html-pdf
thanks

from node-html-pdf.

Flexbox,colors and shadows are not working . Pls find the attached input and output files.

design_new.pdf
design_new.zip

from node-html-pdf.

Yes, they broke support in version 2.1.1 in PhantomJS. ariya/phantomjs#14793

from node-html-pdf.

Is there a work around for this?

from node-html-pdf.

from node-html-pdf.

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.

from node-html-pdf.

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.

from node-html-pdf.

{ 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; }

from node-html-pdf.

Is anyone get around with this issue ?

from node-html-pdf.

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?

from node-html-pdf.

Help, the bootstrap flex layout isn't work. Any solution? Any alternative?

from node-html-pdf.

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

from node-html-pdf.

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.

from node-html-pdf.