OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to remove overflow on printing

  • Thread starter Thread starter Rafaela Machado
  • Start date Start date
R

Rafaela Machado

Guest
I have a page that has a button to print, but I have a problem. the scrollbar appears regardless of the number of items on the page, I would like to remove the scrollbar and show all items when clicking to print. In the example image I posted, 48 items should appear, but there are only 16, and I believe the scrollbar is to blame. overflow is no longer working

enter image description here

Code:
<div *ngIf="showReport">
    <div class="report-container">
      <!-- Cabeçalho do relatório e resumo -->
      <div class="report-header">
        <div class="summary-container">
          <div class="summary-items">
            <div *ngFor="let summaryItem of reportItems.summary">
              <span style="font-weight: bold">{{summaryItem.label}}</span> {{summaryItem.value}}
            </div>
          </div>
          <ion-row *ngIf="reportItems.qrCode" class="qr-code-container">
            <qrcode
              [qrdata]="reportItems.qrCode"
              [width]="160"
              [errorCorrectionLevel]="'L'"
              [elementType]="'svg'"
              [scale]="1"
            ></qrcode>
          </ion-row>
        </div>
      </div>
  
      <!-- Botão de impressão -->
      <div class="button-container no-print">
        <button id="print-button" class="track-button" (click)="printReport()">Imprimir Relatório</button>
      </div>
  
      <!-- Lista de itens do relatório -->
      <div id="printable-report" class="report-list">
        <ion-list id="item-grid">
          <ion-item style="font-weight: bold" class="table-header">
            <ion-label>Nº</ion-label>
            <ion-label>Lote Bobina</ion-label>
            <ion-label>Comprimento (m)</ion-label>
          </ion-item>
          <!-- Iteração sobre os itens reais do relatório -->
          <ion-item *ngFor="let item of [].constructor(48); let i = index" class="table-row">
            <ion-label>{{ i + 1 }}</ion-label>
            <ion-label>DC1D17924T2/02</ion-label>
            <ion-label>100</ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>
  </div>


@media screen {
  @page {
    size: auto;
    overflow: hidden !important;
    page-break-after: always;
    margin: 0px;
    padding: 0px;
    height:fit-content;

  }
}
@media print {
  @page {
    size: auto;
    overflow-y: hidden !important;
    page-break-after: always;
    margin: 0px;
    padding: 0px;
  }
}
<p>I have a page that has a button to print, but I have a problem. the scrollbar appears regardless of the number of items on the page, I would like to remove the scrollbar and show all items when clicking to print. In the example image I posted, 48 items should appear, but there are only 16, and I believe the scrollbar is to blame. overflow is no longer working</p>
<p><a href="https://i.sstatic.net/WxiCZRpw.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WxiCZRpw.png" alt="enter image description here" /></a></p>
<pre><code><div *ngIf="showReport">
<div class="report-container">
<!-- Cabeçalho do relatório e resumo -->
<div class="report-header">
<div class="summary-container">
<div class="summary-items">
<div *ngFor="let summaryItem of reportItems.summary">
<span style="font-weight: bold">{{summaryItem.label}}</span> {{summaryItem.value}}
</div>
</div>
<ion-row *ngIf="reportItems.qrCode" class="qr-code-container">
<qrcode
[qrdata]="reportItems.qrCode"
[width]="160"
[errorCorrectionLevel]="'L'"
[elementType]="'svg'"
[scale]="1"
></qrcode>
</ion-row>
</div>
</div>

<!-- Botão de impressão -->
<div class="button-container no-print">
<button id="print-button" class="track-button" (click)="printReport()">Imprimir Relatório</button>
</div>

<!-- Lista de itens do relatório -->
<div id="printable-report" class="report-list">
<ion-list id="item-grid">
<ion-item style="font-weight: bold" class="table-header">
<ion-label>Nº</ion-label>
<ion-label>Lote Bobina</ion-label>
<ion-label>Comprimento (m)</ion-label>
</ion-item>
<!-- Iteração sobre os itens reais do relatório -->
<ion-item *ngFor="let item of [].constructor(48); let i = index" class="table-row">
<ion-label>{{ i + 1 }}</ion-label>
<ion-label>DC1D17924T2/02</ion-label>
<ion-label>100</ion-label>
</ion-item>
</ion-list>
</div>
</div>
</div>


@media screen {
@page {
size: auto;
overflow: hidden !important;
page-break-after: always;
margin: 0px;
padding: 0px;
height:fit-content;

}
}
@media print {
@page {
size: auto;
overflow-y: hidden !important;
page-break-after: always;
margin: 0px;
padding: 0px;
}
}
</code></pre>
Continue reading...
 

Latest posts

Top