![Print Preview - pg1 left / pg2 right](https://i.stack.imgur.com/PaMon.jpg)
Привет, ребята, возникла проблема, из-за которой при печати pg2 + обрезалась. Я перепробовал все, и его все еще "режут". Добавление @page {margin-top: 16cm;} просто заставляет его начинать на полпути, но все равно обрезать. Я добавил изображение предварительного просмотра, чтобы показать, что происходит (конфиденциальная информация размыта)
Код CSS:
/* Reports */
.kt-reports{
border-top-left-radius:4px;
border-top-right-radius:4px
}
.kt-reports .kt-reports__container{
width:100%;
margin:0;
padding:0 30px
}
.kt-reports .kt-reports__head{
border-top-left-radius:4px;
border-top-right-radius:4px;
background-size:cover;
background-repeat:no-repeat;
padding:80px 0 20px 0;
}
.kt-reports .kt-reports__head .kt-reports__container{
border-top-left-radius:4px;
border-top-right-radius:4px
}
.kt-reports .kt-reports__head .kt-reports__brand{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
font-weight:700;
font-size:2.0rem;
margin-right:10px;
margin-top:5px;
color:#595d6e;
vertical-align:top;
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
margin-top:5px;
text-align:right
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo img{
margin-left: auto;
height:64px;
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo .kt-reports__desc{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
text-align:right;
font-weight:400;
padding:1rem 0 1rem 0;
color:#74788d
}
.kt-reports .kt-reports__head .kt-reports__items{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin-top:50px;
width:100%;
border-top:1px solid #ebedf2
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
color:#595d6e;
margin-right:10px;
margin-top:20px
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item:last-child{
margin-right:0
}
.kt-reports .generated_date {
font-size:11px;
text-align:right;
}
.kt-reports .generated_date .subtitle {
font-weight:500;
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item .kt-reports__subtitle{
font-weight:500;
padding-bottom:.5rem
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item .kt-reports__text{
font-weight:400;
color:#74788d
}
.kt-reports .kt-reports__body{
padding:3rem 0
}
.kt-reports .kt-reports__body table{
background-color:transparent
}
.kt-reports .kt-reports__body table thead tr th{
background-color:transparent;
padding:1rem 9px .5rem 9px;
color:#74788d;
/*
border-top:0;
border-bottom:1px solid #ebedf2;
*/
border:2px solid #595d6e;
font-weight:700;
font-size:13px;
vertical-align: middle;
}
/*.kt-reports .kt-reports__body table thead tr th:not(:first-child){
text-align:right
}
*/
.kt-reports .kt-reports__body table tr.totals_footer td:first-child {text-align:right !important;}
.kt-reports .kt-reports__body table tr.totals_footer td{
text-align:right;
padding: 1rem 9px 1rem 9px;
font-weight:700;
}
.kt-reports .kt-reports__body .table .lrg, .kt-reports .kt-reports__body .subtable .lrg {
width:60%;
}
.kt-reports .kt-reports__body .table .med, .kt-reports .kt-reports__body .subtable .med {
width:40%;
}
.kt-reports .kt-reports__body .table .p30, .kt-reports .kt-reports__body .subtable .p30 {
width:30%;
}
.kt-reports .kt-reports__body .table .sml, .kt-reports .kt-reports__body .subtable .sml {
width:20%;
}
.kt-reports .kt-reports__body .table .vsml, .kt-reports .kt-reports__body .subtable .vsml {
width:10%;
}
.kt-reports .kt-reports__body .table .tny, .kt-reports .kt-reports__body .subtable .tny {
width:5%;
}
.kt-reports .kt-reports__body .table .f114, .kt-reports .kt-reports__body .subtable .f114 {
width:114px;
text-align:center;
}
.kt-reports .kt-reports__body .table .f50, .kt-reports .kt-reports__body .subtable .f50 {
width:50px;
text-align:center;
}
.kt-reports .kt-reports__body table tbody tr td{
background-color:transparent;
padding:1rem 9px 1rem 9px;
border-top:none;
font-size:12px;
color:#595d6e
}
.kt-reports .kt-reports__body table thead tr td.ctal,
.kt-reports .kt-reports__body table tbody tr td.ctal,
.kt-reports .kt-reports__body table tbody tr td:first-child {text-align:center;}
.kt-reports .kt-reports__body table.noctal tr td:first-child {text-align:initial;}
.kt-reports .kt-reports__body table thead tr td.rtal,
.kt-reports .kt-reports__body table tbody tr td.rtal {text-align:right !important;}
.kt-reports .kt-reports__body table thead tr td.ltal,
.kt-reports .kt-reports__body table tbody tr td.ltal {text-align:left;}
.kt-reports .subtable {
width:100%;
}
.kt-reports .kt-reports__body table.subtable tbody tr td:first-child {text-align:left;}
.kt-reports .kt-reports__body .subtable tbody tr td {
padding:0px 10px 0px 10px;
}
.kt-reports .kt-reports__body .subtable tbody tr td:last-child {
padding-right:0px;
}
.kt-reports .kt-reports__body .subtable tbody tr td.f114:last-child {
width:104px;
padding-right:0px;
}
.kt-reports .kt-reports__body .subtable tbody tr td:first-child {
padding-left:0px;
}
.kt-reports .kt-reports__body table tbody tr:nth-child(even) {
background-color:#f9f9f9;
}
.kt-reports .kt-reports__body table.alt_row_subdata tbody tr td{
padding:1rem 1px 0.3rem 1px;
}
.kt-reports .kt-reports__body table.alt_row_subdata tbody tr:nth-child(even) td {
padding:2px;
}
.kt-reports .kt-reports__body table tbody tr:nth-child(odd) {
background-color:#fff;
}
.kt-reports .kt-reports__body .subtable tbody tr,.kt-reports .kt-reports__body .subtable tbody tr td {
background-color: transparent !important;
}
/*
.kt-reports .kt-reports__body table tbody tr td:not(:first-child){
text-align:right
}
*/
/*
.kt-reports .kt-reports__body table tbody tr:first-child td{
padding-top:1.8rem
}
*/
.kt-reports .kt-reports__body .subtable tbody tr:first-child td{
padding-top:0rem
}
.kt-reports .kt-reports__footer{
padding:3rem 0;
background-color:#f7f8fa
}
.kt-reports .kt-reports__footer .kt-reports__container{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.kt-reports .kt-reports__footer .table{
background-color:transparent;
padding:0
}
.kt-reports .kt-reports__footer .table th{
font-size:1.1rem;
text-transform:capitalize;
font-weight:500;
color:#74788d;
border-top:0;
border-bottom:1px solid #ebedf2;
padding:10px 10px 10px 0;
background-color:transparent
}
.kt-reports .kt-reports__footer .table th:last-child{
padding-right:0
}
.kt-reports .kt-reports__footer .table td{
font-size:1.1rem;
text-transform:capitalize;
background-color:transparent;
font-weight:500;
color:#595d6e;
padding:10px 10px 10px 0
}
.kt-reports .kt-reports__footer .table td:last-child{
padding-right:0
}
.kt-reports .kt-reports__actions{
padding:2rem 0
}
.kt-reports .kt-reports__actions .kt-reports__container{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between
}
@media (min-width:1025px){
.kt-reports .kt-reports__container{
width:100%;
margin:0 auto
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
font-weight:700;
font-size:2rem;
margin-bottom:30px;
max-width:540px;
}
}
@media (max-width:1024px) {
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
max-width:340px;
}
}
@media (max-width:768px){
.kt-reports .kt-reports__container{
width:100%;
margin:0;
padding:0 20px
}
.kt-reports .kt-reports__head{
padding:20px 0
}
.kt-reports .kt-reports__head .kt-reports__brand{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
font-weight:700;
font-size:2rem;
margin-bottom:30px;
max-width:240px;
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo{
text-align:left
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo img{
text-align:left
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo .kt-reports__desc{
text-align:left
}
.kt-reports .kt-reports__head .kt-reports__items{
margin-top:20px
}
.kt-reports .kt-reports__body{
padding:2rem 0
}
.kt-reports .kt-reports__footer{
padding:2rem 0
}
}
@media print{
/* @page {size: landscape} */
.kt-reports{
border-top-left-radius:0;
border-top-right-radius:0
}
.kt-reports .kt-reports__head{
padding:45px 0 20px 0;
border-top-left-radius:0;
border-top-right-radius:0
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
max-width:340px;
}
.kt-reports .kt-reports__head .kt-reports__container{
border-top-left-radius:0;
border-top-right-radius:0
}
.kt-reports .kt-reports__body {
padding: 1rem 0;
}
.kt-reports .kt-reports__actions{
display:none!important
}
.kt-reports .kt-reports__footer{
background-color:transparent!important
}
.kt-reports .kt-reports__container{
width:100%;
padding:0 10px
}
.kt-header {
display:none!important;
}
.kt_header_mobile {
display:none!important;
}
.kt-subheader {
display:none!important;
}
.kt-footer {
display:none!important;
}
.kt-aside {
display:none!important;
}
.kt-aside__brand-logo, .kt-header-mobile__logo {
display:none !important;
}
.kt-content {
padding: 0!important;
}
#kt_wrapper{
padding: 0!important;
}
}
Код HTML (Laravel / Blade):
<div class="row">
<div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
<!--begin::Portlet-->
<div class="kt-portlet" id="report-wrapper">
<div class="kt-portlet__body kt-portlet__body--fit">
<div class="kt-reports">
<div class="kt-reports__head">
<div class="kt-reports__container">
<div class="kt-reports__brand">
<h1 class="kt-reports__title">{{__($report_title)}}</h1>
<div href="#" class="kt-reports__logo">
<img src="/images/setangol.png" alt="Logo" />
<span class="kt-reports__desc">
<span>Postal: {{$bursary_administrator->postal_address}}</span>
<span>Physical: {{$bursary_administrator->physical_address}}</span>
</span>
</div>
</div>
<div class="generated_date">
<span><span class="subtitle">{{__('Report Generated')}}:</span> @php echo date('Y-m-d H:i:s'); @endphp</span>
</div>
</div>
</div>
<div class="kt-reports__body">
<div class="kt-reports__container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="f50">{{__('Row')}}</th>
<th class="med">{{__('Student Full Name')}}</th>
<th>{{__('Course')}}</th>
<th class="f114">{{__('Registration Date')}}</th>
<th class="f114">{{__('Subsidy USD')}}</th>
</tr>
</thead>
<tbody>
@php($row_count=0)
@if ($students)
@foreach ($students as $student)
@php($row_count++)
<tr>
<td>{{$row_count}}</td>
<td>{{$student->getStudentFullNameAttribute()}}</td>
<td colspan="3">
<table class="subtable">
<tbody>
@if ($student->bursaries)
@foreach ($student->bursaries as $bursary)
<tr>
@if ($bursary->enrolments->count()>0)
@foreach ($bursary->enrolments as $enrolment)
@if ($enrolment->courses->count()>0)
@foreach ($enrolment->courses as $course)
<td>{{$course->course}}</td>
@endforeach
@else
<td> </td>
@endif
@endforeach
@endif
<td class="f114">{{$bursary->registration_date}}</td>
<td class="rtal f114">$ {{number_format($bursary->subsidy_allowance,2,".",",")}}</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
</div>
</div>
<div class="kt-reports__actions">
<div class="kt-reports__container">
<button type="button" class="btn btn-label-brand btn-bold" onclick="pdfprint('#report-wrapper','summary_report');">Download Report</button>
<button type="button" class="btn btn-brand btn-bold" onclick="window.print();">Print Report</button>
</div>
</div>
</div>
</div>
</div>
<!--end::Portlet-->
</div>
</div>