У меня есть документ, который я пытаюсь распечатать, и я хотел бы, чтобы каждый .card оставался неповрежденным и не разбивался при печати. Я прочитал много других вопросов, но кажется, что ничего не работает. Мой макет выглядит следующим образом:
<div class="container-fluid bg-light mt-4 health_profile px-3">
<div class="row">
<div class="col-12">
<div class="row">
<!-- Basic -->
<div class="col-12 pb">
<div class="card bg-white border border-primary">
<div class="card-header">
Basic
<span class="pull-right"><%= @health_profile.created_at.strftime("%m/%d/%Y") %></span>
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<table class="table table-sm">
<tr>
<th>Name:</th>
<td><%= @health_profile[:name] %></td>
</tr>
<tr>
<th>Address:</th>
<td><%= @health_profile[:address] + ", " + @health_profile[:city] + ", " + @health_profile[:state] + " " + @health_profile[:zip].try(:to_s) %></td>
</tr>
<tr>
<th>DOB:</th>
<td>
<%= @health_profile[:dob] %>
(<%= time_ago_in_words(DateTime.strptime(@health_profile[:dob], "%m/%d/%Y")) %>)
</td>
</tr>
<tr>
<th>Marital Status:</th>
<td><%= @health_profile[:marital_status] %></td>
</tr>
<tr>
<th>Occupation:</th>
<td><%= @health_profile[:occupation] %></td>
</tr>
<tr>
<th>Children:</th>
<% if @health_profile[:children] %>
<td>Yes, Age: <%= @health_profile[:children_ages] %></td>
<% else %>
<td>No children</td>
<% end -%>
</tr>
<tr>
<th>Doctor:</th>
<td><%= @health_profile[:doctor_name] %></td>
</tr>
</table>
</div>
<div class="col-6">
<table class="table table-sm">
<tr>
<th>Email:</th>
<td><%= @health_profile[:email] %></td>
</tr>
<tr>
<th>Phone:</th>
<td><%= @health_profile[:phone] %></td>
</tr>
<tr>
<th>Referrer:</th>
<td><%= @health_profile[:informed] %></td>
</tr>
<tr>
<th>Height:</th>
<td><%= @health_profile[:height] %></td>
</tr>
<tr>
<th>Weight:</th>
<td><%= @health_profile[:weight] %></td>
</tr>
<tr>
<th>Desired Weight:</th>
<td><%= @health_profile[:desired_weight] %></td>
</tr>
<tr>
<th>Doctor Phone:</th>
<td><%= @health_profile[:doctor_phone] %></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Basic -->
<!-- Weight Loss Struggle -->
<div class="col-12 pb">
<div class="card bg-white border border-primary">
<div class="card-header">
Weight Loss Struggle
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<ul class="col-12">
<li>
<%= @first_name %> struggles with weight due to: <strong><%= @health_profile[:issues] %></strong>
</li>
<li>
<% if @health_profile[:weightloss_success] || @health_profile[:weightloss_success] == 't' %>
<%= @first_name %> has lost weight only to regain it <strong><%= @health_profile[:weightloss_success_times] %> times.</strong>
<% else %>
<%= firstName(@health_profile[:name]) %> has <strong>never</strong> successfully lost weight.
<% end -%>
</li>
<li>
<% if @health_profile[:weightloss_fail] || @health_profile[:weightloss_fail] == 't' %>
<%= @first_name %> has unsuccessfully attempted to lose weight <strong><%= @health_profile[:weightloss_unsuccess_times] %> times.</strong>
<% else %>
<%= @first_name %> has <strong>never</strong> unsuccessfully lost weight.
<% end -%>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Weight Loss Struggle -->
<!-- <div class="page-break"></div> -->
<!-- Other Programs -->
<% if !@health_profile[:other_programs].blank? %>
<div class="col-12 pb">
<div class="card bg-white border border-primary">
<div class="card-header">
Other Programs
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p><%= @first_name %> has tried the following weight loss programs:</p>
<ol>
<% @health_profile[:other_programs].split(",").each do |program| %>
<li>
<strong><%= program.titleize %></strong>
<ul>
<li>What did they like?</li>
<br>
<li>What didn't they like?</li>
<br>
</ul>
</li>
<% end -%>
</ol>
<p>Overall how much weight has <%= @first_name %> lost?</p>
<p>What caused <%= @first_name %> to gain the weight back?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<% end -%>
<!-- End Other Programs -->
<!-- Looking For... -->
<div class="col-12 pb">
<div class="card bg-white border border-primary">
<div class="card-header">
What is <%= @first_name %> looking for?
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<% @looking_for.each do |field| %>
<div class="flex align-items-center col-4 pb-2">
<span class="checkbox mr-3"></span>
<%= field %>
</div>
<% end -%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Looking For... -->
</div>
</div>
</div>
</div>
Мои извинения за включение этого, но я хотел включить все потенциально проблемные элементы. Большая часть моего шаблона имеет erb и таблицы. По какой-то причине ничего не происходило при попытке использовать page-break-inside: avoid на элементах .card, и только после долгих проб и ошибок я обнаружил, что следующее правильно разделяет страницу:
@media print {
div, .pb {
display:block;
page-break-inside: avoid;
}
}
Я понятия не имею, почему мне нужно включить div, .pb является родителем элементов .card. Кто-нибудь понимает, почему? Кроме того, поскольку я использую display: block (что необходимо), мой печатный макет выглядит странно. Есть ли способ обойти это? Наконец, если вам известен инструмент для решения проблем с печатью, это было бы полезно.