WeasyPrint: Don't apply max-width to flex items unless their flex container has an absolute width

Did some styling with Bootstrap, everything works fine except the grid system. Did this in my HTML-File:

<div class="container">
    <div class="row">
      <div class="col">
      </div>
      <div class="col">
      </div>
    </div>
  </div>

PDF-File ignores complete the grid system (div class=“col”) from bootstrap

About this issue

Original URL
State: open
Created 6 years ago
Comments: 20 (10 by maintainers)

Most upvoted comments

I know that the problem probably comes from a problem in the flex layout.

Problem is that bootstrap css defines both, a flex-basis and a max-width for the col-* flex items and that confuses WeasyPrint resulting in wrong column sizes. There a two workarounds to prevent the confusion and achieve the desired (proportional) column widths:

Apply an absolute width to the flex container, e.g.: .row {width: 20cm} This isn’t a good one – 20cm, huh?
Hide the (superfluent?) max-width from WeasyPrint by unsetting it for all .col-* definitions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Bootstrap test</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    .col,
      *[class^="col-"] {
        border: 1px solid #eee;
      }
    @media print {
      .col,
      *[class^="col-"] {
        max-width: none !important;  
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
    </div>
    <div class="row">
      <div class="col-5">col-5</div>
    </div>
    <div class="row">
      <div class="col-3 text-center">
        <p>3 columns</p>
      </div>
      <div class="col-2 text-center">
        <p>2 columns</p>
      </div>
    </div>
  </div>      
</body>
</html>

renders as expected:

workaround

Tontyna on Oct 15, 2019

Hi, issue still persists for me. Weasyprint 45, bootstrap 4.3.1. The columns are way off and the numbers (below in <p>) are rendered as images? Simple HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap test</title>
    <link rel="stylesheet" href="./vendor/bootstrap/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <div class="row">
        <div class="col-3 text-center">
           <p>3 columns</p>
        </div>
        <div class="col-9 text-center">
           <p>9 columns</p>
        </div>
      </div>
   </div>
</body>
</html>

mzanders on Mar 5, 2019

Hi @hybridpicker, Bootstrap 4.x uses a CSS flex layout which is currently not supported by WeasyPrint. However, it seems like it was implemented recently in https://github.com/Kozea/WeasyPrint/pull/579, but I didn’t try it yet. I used for my project a modified version of the column CSS from Bootstrap pre 4.x: https://github.com/senaite/senaite.impress/blob/master/src/senaite/impress/static/css/bootstrap-print.css, but there you need to keep in mind that WeasyPrint does not break in between floating blocks, see here: https://github.com/Kozea/WeasyPrint/issues/36

ramonski on Sep 21, 2018