Fix button dimensions

primefaces · Oct 4, 2023 · 162d199 · 162d199
1 parent b31cd77
commit 162d199
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/app/components/image/image.css b/src/app/components/image/image.css
@@ -16,6 +16,8 @@
         top: 0;
         width: 100%;
         height: 100%;
+        outline: none;
+        border: none;
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts
@@ -23,7 +23,7 @@ import { FocusTrapModule } from 'primeng/focustrap';
     template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
             <img [attr.src]="src" [attr.srcset]="srcSet" [attr.sizes]="sizes" [attr.alt]="alt" [attr.width]="width" [attr.height]="height" [ngStyle]="imageStyle" [class]="imageClass" (error)="imageError($event)" />
-            <button type="button" class="p-image-preview-indicator" *ngIf="preview" (click)="onImageClick()" #previewButton>
+            <button type="button" class="p-image-preview-indicator" (click)="onImageClick()" #previewButton [ngStyle]="{'height': imgHeight, 'width': width + 'px'}" style="border: 'none';">
                 <ng-container *ngIf="indicatorTemplate; else defaultTemplate">
                     <ng-container *ngTemplateOutlet="indicatorTemplate"></ng-container>
                 </ng-container>
@@ -230,7 +230,11 @@ export class Image implements AfterContentInit {
         min: 0.5
     };
 
-    constructor(@Inject(DOCUMENT) private document: Document, private config: PrimeNGConfig, private cd: ChangeDetectorRef) {}
+    get imgHeight() {
+        return this.document && this.document.defaultView ? getComputedStyle(DomHandler.findSingle(this.el.nativeElement, 'img'))['height'] : '100%';
+    }
+
+    constructor(@Inject(DOCUMENT) private document: Document, private config: PrimeNGConfig, private cd: ChangeDetectorRef, public el: ElementRef) {}
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {