Flexbox wkhtmltopdf Rendering Issue

Question

I have a page that I am turning into a pdf with wkhtmltopdf. I have a 3 column layout and it works well in Chrome but the pdf is incorrectly generated. Is there an alternative to flexbox that would give the same view or a way to make flexbox work in wkhtmltopdf? Modernizr did not help. Thanks.

HTML:

<div class="header">
  <div id="name" class="center">
    <h2>
      Centered Text
    </h2>
  </div>
  <div id="links" class="left">
    <h3>
    Left Line 1
    <br>
    Left Line 2
    </h3>
  </div>
  <div id="contact" class="right">
    <h3>
    Right Line 1
    <br>
    Right Line 2
    </h3>
  </div>
</div>
</div class="clear"></div>

CSS:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.center {
  order: 2;
  text-align: center;
}

.left {
  order: 1;
  float: left;
  text-align: left;
}

.right {
  order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  flex-basis: 0;
  order: 1;
}

.clear {
  clear: both;
}

Try to use Media query for print view. – Hujjat Nazari Nov 18 '15 at 16:15 — Hujjat Nazari, Nov 18 '15 at 16:15

score 14 · Answer 1 · answered Dec 12 '15 at 04:58

14

wkhtmltopdf uses an old version of WebKit and so you must use the original Flexbox spec, which is nowhere near as powerful but can still do some of the same effects.

Note, also, that you'll have to prefix lots of properties with -webkit-.

answered Dec 12 '15 at 04:58

TALlama

15,620
8
37
47

2

See also https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 and http://stackoverflow.com/questions/26036663/page-break-after-not-working-in-flexboxes. I'm using css-next and setting `Chrome >= 13` worked for me. – Steve Jul 18 '16 at 14:43
2

Can someone tell me why it uses an old version of WebKit? I keep seeing the reason that nothing works right is because of this, but no one says why it is an old version. – Arrow_Raider Jun 30 '21 at 17:55

score 2 · Answer 2 · answered Aug 04 '21 at 12:21

This specific comment in that issue brings a solution that worked for me: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522#issuecomment-848651693

"to make work flex on wkhtmltopdf you need to use display: -webkit-box; for flex and -webkit-box-pack: justify; for justify-content: space-between;. So we should use old flex syntax"

Flexbox wkhtmltopdf Rendering Issue

2 Answers2

Linked