Flexbox layouts don't work

[jdidion]

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.

[Lichtjaeger]

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.

[marcbachmann]

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

[jdidion]

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 notifications@github.com 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.

[ripper2hl]

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

[marcbachmann]

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

[ripper2hl]

Okay, thanks very much !!

[marcbachmann]

html-pdf@2.0.0 now uses phantomjs v2. Have fun

[jdidion]

Thanks for the update!

On Feb 16, 2016, at 5:41 PM, Marc Bachmann notifications@github.com wrote:

html-pdf@2.0.0 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.

[MOUMBE]

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

[sudharsanmit]

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

design_new.pdf design_new.zip

[Lichtjaeger]

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

[taylorstine]

Is there a work around for this?

[sudharsanmit]

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 notifications@github.com 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>

[kumarharsh]

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

[jhon-andrew]

Is there already a fix for this?

[4muzar]

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!

[alex-brain]

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!

[kumarharsh]

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.

[leoskyrocker]

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.

[Akash187]

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.

[gsbarreto]

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

[amaneer94]

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

[sumdook]

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

[Piyush-Use-Personal]

Is anyone get around with this issue ?

[JSEvgeny]

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

[riandev]

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?

[dan13lJD]

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

[underscoDe]

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

[MohammadK1373]

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.