ARTICLE AD BOX
Environment: Angular 17.x
Problem: The ng2-pdfjs-viewer div gets displayed beyond the bottom boundary of wrapping div. Please see attached screen shot.
Tried changing the div height of wrapping div of ng2-pdfjs-viewer. But whatever height I assign, the lower scroller of pdf viewer goes below the bottom border of the overall wrapping div.
Unable to debug the issue.
Part of the component.html:
<div #mandateDocs class="box-action mt-1r"> <div class="step"> Mandate Documents </div> <div [ngClass]="isSmallScreen ? 'flex-column' : 'flex'"> <div [ngClass]="isSmallScreen ? 'screenSmall' : 'screenBig49per'"> <div> <div class='flex-align-center'> <span class='subTitle'>Add Document Files(only PDF allowed): </span> <button mat-stroked-button color="primary" type="button" (click)="showUploadOption = !showUploadOption" class="ml-1r"> Add Document </button> </div> @if(showUploadOption){ <div> <div class="mt-1r"> <div> <mat-form-field class="w-20r"> <mat-label>Select Document Type</mat-label> <mat-select matInput #docType (selectionChange)="onDocTypeSelect()"> <mat-option>None</mat-option> <mat-option value="Other Doc">Other Doc</mat-option> <mat-option *ngFor="let x of docNameOptions" [value]='x.name'> {{ x.name }} </mat-option> </mat-select> </mat-form-field> </div> <div [class.hidden]="!showOtherDocOption"> <mat-form-field class="screenBig20r"> <mat-label>Document Name</mat-label> <input matInput #docName> </mat-form-field> </div> <button mat-stroked-button color="primary" type="button" (click)="filePicker.click()" style="margin-left: 1rem;"> Select File </button> </div> @if(file){ <div style="background-color:lightgray"> <span class="small">Selected File: {{ file.name}}</span> </div> <div class="mt-1r"> <button mat-raised-button color="primary" type="button" class="ml-1r" (click)="uploadDoc()" [disabled]="disableUpload()"> Upload File </button> <mat-icon matTooltip="cancel" (click)="onCancelFileSelection()" class="icon-cancel"> cancel </mat-icon> </div> } </div> } <div class="mt-1r"> <span class="bold">Uploaded Files:</span> @if(doc){ @if(!doc.docs){ <span class="red"> None</span> } @if(doc.docs){ <table> <tr *ngFor="let e of doc?.docs, let i = index"> <td> <span> {{i + 1}}. <span class="link" (click)="getDoc(e.name, e.filePath)">{{ e.name }}</span> </span> </td> <td> <mat-icon (click)="deleteMandateDoc(e.filePath)" class="icon-cancel font-medium" matTooltip="Delete"> delete </mat-icon> </td> </tr> </table> } } </div> </div> </div> <div [ngClass]="isSmallScreen ? 'screenSmall pdf-viewer' : 'screenBig49per pdf-viewer'"> @if(pdfDocName){ <div class="flex-align-center "> <span class="ml-1r"> Document: {{ pdfDocName }} </span> <mat-icon class="link-red ml-2r" (click)="clearPdfViewer()" matTooltip="close"> cancel </mat-icon> </div> } <ng2-pdfjs-viewer #pdfViewerAutoLoad></ng2-pdfjs-viewer> </div> </div> </div>component.css
.box-action { border-left: #5047fc 7px solid; border-radius: 10px; background-color:var(--offWhite); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 10px; } .flex { display: flex; width: 100%; } .flex-align-center { display: flex; align-items: center; } .flex-column { display: flex; flex-direction: column; width: 100%; } .icon-cancel { color:red; margin-left: 10px; cursor: pointer; text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4); } .ml-1r { margin-left: 1rem; } .mt-1r { margin-top: 1rem; } .pdf-viewer { max-height: 40vh !important; } .screenBig49per { width: 49%; max-width: 90vw; } .screenSmall { display: flex; flex-direction: column; flex-shrink: 0; width: 100vw; } .w-20r { width: 20rem; max-width: 90vw; }
