feat(ui5-dynamic-page): fit content that has 100% height

packages/fiori/src/DynamicPage.hbs

@@ -32,7 +32,12 @@
     {{/unless}}
 
     <div class="{{classes.content}}">
-      <slot></slot>
+      <div class="{{classes.fitContent}}">
+        <slot></slot>
+        {{#if showFooter}}
+          <div class="{{classes.spacer}}"></div>
+        {{/if}}
+      </div>
     </div>
   </div>
 

packages/fiori/src/DynamicPage.ts

@@ -113,9 +113,15 @@ class DynamicPage extends UI5Element {
 			content: {
 				"ui5-dynamic-page-content": true,
 			},
+			fitContent: {
+				"ui5-dynamic-page-fit-content": true,
+			},
 			footer: {
 				"ui5-dynamic-page-footer": true,
 			},
+			spacer: {
+				"ui5-dynamic-page-spacer": true,
+			},
 		};
 	}
 

packages/fiori/src/themes/DynamicPage.css

@@ -19,10 +19,29 @@
 }
 
 .ui5-dynamic-page-scroll-container {
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 100%;
 }
 
+/* Automatically fit content that has height: 100% */
+.ui5-dynamic-page-scroll-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.ui5-dynamic-page-content {
+   flex-grow: 1;
+   position: relative;
+}
+
+.ui5-dynamic-page-fit-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 /* Footer  */
 .ui5-dynamic-page-footer {
     position: sticky;
@@ -32,8 +51,12 @@
     opacity: 1;
 }
 
-:host([show-footer]) .ui5-dynamic-page-content {
-    padding-bottom: 4rem;
+.ui5-dynamic-page-spacer {
+    height: var(--_ui5_dynamic_page_footer_spacer);
+}
+
+:host([show-footer]) .ui5-dynamic-page-fit-content {
+    bottom: var(--_ui5_dynamic_page_footer_spacer);
 }
 
 :host([show-footer]) .ui5-dynamic-page-footer {
@@ -82,7 +105,7 @@
 
 /* Responsive paddings */
 
-:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) .ui5-dynamic-page-fit-content,
 :host([media-range="S"]) ::slotted([slot="titleArea"]),
 :host([media-range="S"]) ::slotted([slot="headerArea"]) {
     padding: 0 1rem;
@@ -92,16 +115,16 @@
     padding-top: 0.5rem;
 }
 
-:host([media-range="M"]) .ui5-dynamic-page-content,
+:host([media-range="M"]) .ui5-dynamic-page-fit-content,
 :host([media-range="M"]) ::slotted([slot="titleArea"]),
 :host([media-range="M"]) ::slotted([slot="headerArea"]),
-:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) .ui5-dynamic-page-fit-content,
 :host([media-range="L"]) ::slotted([slot="titleArea"]),
 :host([media-range="L"]) ::slotted([slot="headerArea"]) {
     padding: 0 2rem;
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) .ui5-dynamic-page-fit-content,
 :host([media-range="XL"]) ::slotted([slot="titleArea"]),
 :host([media-range="XL"]) ::slotted([slot="headerArea"]) {
     padding: 0 3rem;

packages/fiori/src/themes/base/DynamicPage-parameters.css

@@ -1,3 +1,4 @@
 :root {
     --_ui5_dynamic_page_title_content_padding_left: 1rem; 
+    --_ui5_dynamic_page_footer_spacer: 4rem; 
 }

packages/fiori/test/pages/DynamicPage.html

@@ -113,8 +113,8 @@
                             <div class="productInfo">
                                 <ui5-title level="H5">Supplier:</ui5-title>
                                 <ui5-title level="H5" id="lblSupplier"
-                                    ><b>Titanium</b></ui5-title
-                                >
+                                    ><b>Titanium</b></ui5-title>
+                                <ui5-button id="scrollBtn">Scroll to bottom</ui5-button>
                             </div>
                         </div>
                     </div>
@@ -829,6 +829,14 @@
             document.getElementById("toggleFooterBtn").addEventListener("click", () => {
                 page.showFooter = !page.showFooter;
             });
+
+            document.getElementById("scrollBtn").addEventListener("click", () => {
+                const scrollContainer = document.getElementById("page")
+                    .shadowRoot.querySelector(".ui5-dynamic-page-scroll-container");
+                const newScrollTop = scrollContainer.scrollHeight - scrollContainer.offsetHeight;
+
+                scrollContainer.scrollTop = newScrollTop;
+            });
         </script>
     </body>
 </html>

packages/fiori/test/pages/styles/DynamicPage.css

@@ -2,4 +2,8 @@ html, body {
     height: 100%;
     padding: 0;
     margin: 0;
+}
+
+.content-padding > * {
+	padding: 0.5rem;
 }

packages/fiori/test/specs/DynamicPage.spec.js

@@ -0,0 +1,88 @@
+import { assert } from "chai";
+
+describe("Page layout when content has 100% height", () => {
+	before(async () => {
+		await browser.url(`test/pages/DynamicPageWithFullscreenContent.html`);
+	});
+
+	it("footer does not hide the content", async () => {
+        const page = await browser.$("#page");
+        const content = await browser.$("#content");
+        const footer = await browser.$("#footer");
+
+        assert.ok(await page.getProperty("showFooter"), "Footer is shown");
+
+        const contentBottom = await browser.execute((el) => {
+            return el.getBoundingClientRect().bottom;
+        }, content);
+        const footerTop = await browser.execute((el) => {
+            return el.getBoundingClientRect().top;
+        }, footer);
+
+        assert.ok(contentBottom <= footerTop, "No overlap");
+    });
+
+    it("content expands to fill the space between header and footer", async () => {
+        const page = await browser.$("#page");
+        const content = await browser.$("#content");
+        const header = await browser.$("#page ui5-dynamic-page-header");
+        const footerSpacer = await page.shadow$(".ui5-dynamic-page-spacer");
+
+        assert.ok(await page.getProperty("showFooter"), "Footer is shown");
+
+        const headerBottom = await browser.execute((el) => {
+            return el.getBoundingClientRect().bottom;
+        }, header);
+
+        const footerTop = await browser.execute((el) => {
+            return el.getBoundingClientRect().top;
+        }, footerSpacer);
+
+        const contentTop = await browser.execute((el) => {
+            return el.getBoundingClientRect().top;
+        }, content);
+
+        const contentBottom = await browser.execute((el) => {
+            return el.getBoundingClientRect().bottom;
+        }, content);
+
+        assert.strictEqual(contentTop, headerBottom, "Content is rendered right below header");
+        assert.strictEqual(contentBottom, footerTop, "Content is rendered right above footer");
+    });
+
+});
+
+describe("Page layout when content oveflows", () => {
+    before(async () => {
+        await browser.url(`test/pages/DynamicPage.html`);
+    });
+
+    it("footer does not hide the content", async () => {
+        const page = await browser.$("#page");
+        const content = await browser.$("#col1list");
+        const footer = await browser.$("#footer");
+        const scrollTopBeforeScroll = await page.getProperty("iPreviousScrollAmount");
+        const scrollButton = await browser.$("#scrollBtn");
+
+        assert.ok(await page.getProperty("showFooter"), "Footer is shown");
+
+        // act: scroll the page down
+        await scrollButton.click();
+
+        // wait untill the page processes the scroll event
+        await browser.waitUntil(async () => (await browser.$("#page").getProperty("iPreviousScrollAmount")) > scrollTopBeforeScroll, {
+            timeout: 2000,
+            timeoutMsg: "The scroll handler must me called."
+        });
+
+        // check if footer overlaps content
+        const contentBottom = await browser.execute((el) => {
+            return el.getBoundingClientRect().bottom;
+        }, content);
+        const footerTop = await browser.execute((el) => {
+            return el.getBoundingClientRect().top;
+        }, footer);
+
+        assert.ok(contentBottom <= footerTop, "No overlap");
+    });
+});