diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs index 7b21915b334a..f61927f8fdd2 100644 --- a/packages/fiori/src/DynamicPage.hbs +++ b/packages/fiori/src/DynamicPage.hbs @@ -32,7 +32,12 @@ {{/unless}}
- +
+ + {{#if showFooter}} +
+ {{/if}} +
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 07099cbc0cd0..55e9f13d066b 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/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, + }, }; } diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css index 60bce09f5c24..0c5cc9b753e3 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/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; diff --git a/packages/fiori/src/themes/base/DynamicPage-parameters.css b/packages/fiori/src/themes/base/DynamicPage-parameters.css index 2169196ba13c..8b8df904039a 100644 --- a/packages/fiori/src/themes/base/DynamicPage-parameters.css +++ b/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; } \ No newline at end of file diff --git a/packages/fiori/test/pages/DynamicPageWithFullscreenContent.html b/packages/fiori/test/pages/DynamicPageWithFullscreenContent.html new file mode 100644 index 000000000000..c0ad57082d74 --- /dev/null +++ b/packages/fiori/test/pages/DynamicPageWithFullscreenContent.html @@ -0,0 +1,524 @@ + + + + + + + Dynamic page + + + + + + + + + + + + + + Link1 + + Link2 + Link3 + Link4 + Link5 + Link6 + Link7 + Location + + + Select page content: + + +
+ Select content type from the dropdown +
+ +
+ Select content type from the dropdown +
+ + + div with height="100%" + IllustratedMessage + DynamicSideContent + MediaGallery + ProductSwitch + Carrousel + Table + Table growing with button + Table growing with scroll + + + + + + + + + + + + +
+
+ + +
+
+ Product: + +
+
+
+ Description: + +
+
+
+ Supplier: + Titanium +
+
+
+
+ Rating: + +
+ +
+ + + + + Edit + Close + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/test/pages/styles/DynamicPage.css b/packages/fiori/test/pages/styles/DynamicPage.css index a630f86ac883..d4f20921f136 100644 --- a/packages/fiori/test/pages/styles/DynamicPage.css +++ b/packages/fiori/test/pages/styles/DynamicPage.css @@ -2,4 +2,8 @@ html, body { height: 100%; padding: 0; margin: 0; +} + +.content-padding > * { + padding: 0.5rem; } \ No newline at end of file