TIL: Grid and flex doesn't work in PDF print format. Use table instead

Frappe Framework Print Formats
1

I had a problem with layout in PDF view, specifically grid and flex, even tho print view was fine. So just in case someone else has this problem, wkhtmltopdf does not support grid and flex. So I want with more basic elements and used table which solved my layout problems.

2

You can use bootstrap row and col for grid.

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column 1</div>
    <div class="col-xs-6">Column 2</div>
  </div>
  <div class="row">
    <div class="col-xs-4">Column 1</div>
    <div class="col-xs-4">Column 2</div>
    <div class="col-xs-4">Column 3</div>
  </div>
</div>

Bootstrap version: 3.5 or something but < 4

1 Like
3

Hmm, so flex does work…
Because these classes are basically this

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Custom class similar to Bootstrap's col-xs-4 */
.col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
    box-sizing: border-box;
}
4

Yes you are right!