fix(ui5-popover): correct position of the footer (#8180)

When there is height set on the popover the footer should be positioned on the bottom of the popover. Fixes: #8009
SAP · Jan 25, 2024 · a5a2f8b · a5a2f8b
1 parent 226d975
commit a5a2f8b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -17,6 +17,7 @@
     flex-direction: column;
     overflow: hidden;
     outline: none;
+    justify-content: space-between;
 }
 
 .ui5-popup-root .ui5-popup-header-root {
@@ -27,6 +28,7 @@
 
 .ui5-popup-content {
     color: var(--sapTextColor);
+    flex: auto;
 }
 
 .ui5-popup-footer-root {

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -449,6 +449,31 @@ <h2>Horizontal Align</h2>
 	<span id="createAndRemoveResult" style="display: none;"></span>
 	<br>
 	<br>
+
+	<ui5-button id="btn-footer-position">Open ResponsivePopover with Footer and Content</ui5-button>
+	<ui5-responsive-popover style="height: 500px;" id="popover-footer-position">
+		<div>Content</div>
+		<div slot="footer">Footer</div>
+	</ui5-responsive-popover>
+	<ui5-button id="btn2-footer-position">Open Popover with Footer and Content</ui5-button>
+	<ui5-popover style="height: 500px;" id="popover2-footer-position">
+		<div>Content</div>
+		<div slot="footer" style="height: 2.75rem;">Footer</div>
+	</ui5-popover>
+	<ui5-button id="btn3-footer-position">Open Popover with Header and Content</ui5-button>
+	<ui5-popover style="height: 500px;" id="popover3-footer-position">
+		<div slot="header">Header</div>
+		<div>Content</div>
+	</ui5-popover>
+	<ui5-button id="btn4-footer-position">Open Popover with Header, Footer and Content</ui5-button>
+	<ui5-popover style="height: 500px;" id="popover4-footer-position">
+		<div slot="header">Header</div>
+		<div>Content</div>
+		<div slot="footer">Footer</div>
+	</ui5-popover>
+	<br>
+	<br>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.showAt(btn);
@@ -670,6 +695,22 @@ <h2>Horizontal Align</h2>
 			popoverInsideContainingBlock.showAt(openPopoverInsideContainingBlockButton);
 		});
 
+		document.getElementById("btn-footer-position").addEventListener("click", (e) => {
+		document.getElementById("popover-footer-position").showAt(e.currentTarget);
+		});
+
+		document.getElementById("btn2-footer-position").addEventListener("click", (e) => {
+		document.getElementById("popover2-footer-position").showAt(e.currentTarget);
+		});
+
+		document.getElementById("btn3-footer-position").addEventListener("click", (e) => {
+		document.getElementById("popover3-footer-position").showAt(e.currentTarget);
+		});
+
+		document.getElementById("btn4-footer-position").addEventListener("click", (e) => {
+		document.getElementById("popover4-footer-position").showAt(e.currentTarget);
+		});
+
 	</script>
 </body>