fix(angular/modal): avoid overflow of modal content (#1281)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · May 17, 2024 · a8a2d55 · a8a2d55
1 parent 544ceed
commit a8a2d55
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/dry-roses-brake.md b/.changeset/dry-roses-brake.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix-angular': patch
+---
+
+fix(angular/modal): avoid overflow of modal content
diff --git a/packages/angular-test-app/src/preview-examples/modal-by-template.ts b/packages/angular-test-app/src/preview-examples/modal-by-template.ts
@@ -16,7 +16,7 @@ import { ModalService } from '@siemens/ix-angular';
     <ix-button (click)="openModal()">Show modal</ix-button>
 
     <ng-template #customModal let-modal>
-      <div>
+      <ix-modal>
         <ix-modal-header> Message headline </ix-modal-header>
         <ix-modal-content
           >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
@@ -33,7 +33,7 @@ import { ModalService } from '@siemens/ix-angular';
             OK
           </ix-button>
         </ix-modal-footer>
-      </div>
+      </ix-modal>
     </ng-template>
   `,
 })

diff --git a/packages/angular/src/modal/modal.service.spec.ts b/packages/angular/src/modal/modal.service.spec.ts
@@ -68,7 +68,7 @@ test('should create modal by component typ', async () => {
       },
       injector: {
         get: jest.fn(() => ({
-          nativeElement: {}
+          nativeElement: { style: {} }
         })),
       },
     })),

diff --git a/packages/angular/src/modal/modal.service.ts b/packages/angular/src/modal/modal.service.ts
@@ -85,6 +85,7 @@ export class ModalService {
     this.appRef.attachView(instance.hostView);
 
     const element = instance.injector.get(ElementRef);
+    element.nativeElement.style.display = 'contents';
 
     const modalInstance = await this.createModalInstance<TData, TReason>(
       context,