How to break page with CSS in a PDF

Question

How can I avoid to have my qrcodes stickers cut in the middle? I am generating pdf with the awesome gem wicked pdf I tried to add page-break-after but I don't get how it works.... Help would be much appreciated

Here the style for the pdf, it is in vendor/assets/pdf.scss

.sticker {
    border: 1px dashed #111;
    padding: 10px;
    height: 260px;
    width: 170px;
}

table.qrcode {
  border-width: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 10px;

  td {
    border-width: 0;
    border-style: none;
    border-color: #0000ff;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    width: 4px;
    height: 4px;

    &.black {
      background-color: #000 !important
    }

    &.white {
      background-color: #fff !important
    }
  }
}

And here is my app/views/stickers/show.pdf.erb

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="content">
    <div id="stickers">
        <div class="row">
        <% @sticker.quantity.times do  %>
            <div class="col-xs-3">
                <div class="sticker">
                    <div class="row">
                        <div class="col-xs-12">
                            <%= render_qr_code_small("https://super-shop.herokuapp.com/admin/products/#{@sticker.product}") %>  
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list list-unstyled">
                                <li><strong><%= number_to_currency_euro @sticker.product.price %></strong></li>
                                <li><%= @sticker.product.title %> - <%= @sticker.product.color %></li>
                                <li><%= @sticker.product.brand %></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        <% end %>
    </div>  
    </div>
</div>

Answer 1

There's css for avoiding breaks:

.nobreak {
  page-break-inside: avoid !important;
}

and add nobreak to divs that you do not want to be split