fix: place confirm-dialog footer correctly when height is set (#8678)

vaadin · Feb 14, 2025 · 62a0c6d · 62a0c6d
1 parent b0a16c6
commit 62a0c6d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay-styles.js b/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay-styles.js
@@ -16,6 +16,10 @@ export const confirmDialogOverlay = css`
     height: var(--_vaadin-confirm-dialog-content-height);
   }
 
+  #resizerContainer {
+    height: 100%;
+  }
+
   ::slotted([slot='header']) {
     pointer-events: auto;
   }

diff --git a/packages/confirm-dialog/test/confirm-dialog.test.js b/packages/confirm-dialog/test/confirm-dialog.test.js
@@ -654,6 +654,14 @@ describe('vaadin-confirm-dialog', () => {
         await nextFrame();
         expect(overlay.getAttribute('style')).to.be.not.ok;
       });
+
+      it('should place footer part at the bottom of the overlay', async () => {
+        confirm._contentHeight = '500px';
+        await nextFrame();
+        const footer = overlay.$.overlay.querySelector('[part="footer"]');
+        const overlayRect = overlay.$.overlay.getBoundingClientRect();
+        expect(footer.getBoundingClientRect().bottom).to.be.closeTo(overlayRect.bottom, 0.1);
+      });
     });
 
     describe('before attach', () => {