Блог

Как я могу избежать обрезки стикеров qrcodes посередине? Я создаю PDF с помощью awesome gem wicked pdf Я пытался добавить page-break-after, но я не понимаю, как это работает…. Буду признателен за помощь

Вот стиль для pdf, он находится в 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;

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

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

И вот мое приложение / 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>
  

Для избежания разрывов есть css:

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

и добавьте nobreak в divs, которые вы не хотите разделять