From 38a2527c0bdf459f92c3a6f501b036bbf3fed7c7 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 26 Mar 2025 13:02:58 +0200 Subject: [PATCH 1/2] fix(ui5-dynamic-page): adjust scroll padding for header/footer --- packages/fiori/src/DynamicPage.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 2322aa6005ea..44618325a673 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -209,6 +209,19 @@ class DynamicPage extends UI5Element { this.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile; this.dynamicPageTitle.removeAttribute("hovered"); } + const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0; + const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0; + + if (this.scrollContainer) { + this.scrollContainer.style.setProperty("scroll-padding-block-end", + this.showFooter ? "4rem" : "0"); + + if (this._headerSnapped) { + this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`); + } else { + this.scrollContainer.style.setProperty("scroll-padding-block-start", `${headerHeight + titleHeight}px`); + } + } } get dynamicPageTitle(): DynamicPageTitle | null { From 3894dd1549f009023a2feef82f32fb68caf0244b Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Fri, 4 Apr 2025 10:50:28 +0300 Subject: [PATCH 2/2] fix: make scroll-padding-block-end dynamically based --- packages/fiori/src/DynamicPage.ts | 8 ++++++-- packages/fiori/src/themes/DynamicPage.css | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 7e73a626643b..8495c15fd1a1 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -211,10 +211,10 @@ class DynamicPage extends UI5Element { } const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0; const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0; + const footerHeight = this.showFooter ? this.footerWrapper?.getBoundingClientRect().height : 0; if (this.scrollContainer) { - this.scrollContainer.style.setProperty("scroll-padding-block-end", - this.showFooter ? "4rem" : "0"); + this.scrollContainer.style.setProperty("scroll-padding-block-end", `${footerHeight}px`); if (this._headerSnapped) { this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`); @@ -232,6 +232,10 @@ class DynamicPage extends UI5Element { return this.querySelector("[ui5-dynamic-page-header]"); } + get footerWrapper() { + return this.shadowRoot?.querySelector(".ui5-dynamic-page-footer"); + } + get actionsInTitle(): boolean { return this._headerSnapped || this.showHeaderInStickArea || this.headerPinned; } diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css index a1fb9eeb3f6b..4b2b7a3d4c06 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/packages/fiori/src/themes/DynamicPage.css @@ -44,7 +44,8 @@ /* Footer */ .ui5-dynamic-page-footer { position: sticky; - bottom: 0.5rem; + bottom: 0; + padding: 0 0.5rem 0.5rem 0.5rem; box-sizing: border-box; z-index: 110; opacity: 0; @@ -71,7 +72,6 @@ background-color: var(--_ui5_dynamic_page_header_background_color); box-sizing: content-box; width: auto; - margin: 0 0.5rem 0.5rem 0.5rem; }