fix(ui5-dialog): fix content stretching on Safari (#3068)

On Safari the style that stretches the content flex: 1 1 auto is not working the same way as in the rest of the browsers. Two issues have been observed: (1) One with the Wizard, the navigation header used to not remain at the top, but scrolled together with the content, which breaks the scrolling/navigation of the Wizard (2) One of the Dialog itself - the header and the footer are not displayed correctly (see below), because of the content not stretched correctly. Adding "height: 100%", when the "stretched" property is set did fix the issues. FIXES: #3064
SAP · Mar 31, 2021 · 1931252 · 1931252
1 parent cdaafec
commit 1931252
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 19 deletions.
diff --git a/packages/fiori/test/pages/Wizard_test.html b/packages/fiori/test/pages/Wizard_test.html
@@ -175,7 +175,7 @@
 		</ui5-wizard>
 
 		<ui5-dialog id="dialog" stretch header-heading="Wizard">
-				<ui5-wizard>
+				<ui5-wizard id="wizInDialog">
 					<ui5-wizard-step icon="sap-icon://product" selected heading="Product type">
 						<div style="display: flex; min-height: 200px; flex-direction: column;">
 							<ui5-title>1. Product Type</ui5-title><br>
@@ -189,8 +189,8 @@
 
 							<ui5-input></ui5-input>
 						</div>
-		
-						<ui5-button design="Emphasized">Step 2</ui5-button>
+
+						<ui5-button id="toStep2InDialog" design="Emphasized">Step 2</ui5-button>
 					</ui5-wizard-step>
 
 					<ui5-wizard-step heading="Product Information">
@@ -230,8 +230,8 @@
 								</div>
 							</div>
 						</div>
-		
-						<ui5-button design="Emphasized">Step 3</ui5-button>
+
+						<ui5-button id="toStep3InDialog" design="Emphasized">Step 3</ui5-button>
 					</ui5-wizard-step>
 
 					<ui5-wizard-step heading="Options">
@@ -271,8 +271,8 @@
 								</div>
 							</div>
 						</div>
-		
-						<ui5-button design="Emphasized">Step 4</ui5-button>
+
+						<ui5-button id="toStep4InDialog" design="Emphasized">Step 4</ui5-button>
 					</ui5-wizard-step>
 
 					<ui5-wizard-step heading="Pricing">
@@ -311,6 +311,7 @@
 
 	<script>
 		var wiz = document.getElementById("wizTest");
+		var wizInDialog = document.getElementById("wizInDialog");
 		var counter = 0;
 		wiz.addEventListener("ui5-selection-change", function (event) {
 			console.log(event.detail.selectedStep);
@@ -319,37 +320,53 @@
 		});
 
 		toStep2.addEventListener("click", function () {
-			deselectAll();
-			setStep(1);
+			deselectAll(wiz);
+			setStep(1, wiz);
 		});
+
 		toStep22.addEventListener("click", function () {
-			deselectAll();
-			setStep(1);
+			deselectAll(wiz);
+			setStep(1, wiz);
 		});
 
 		toStep3.addEventListener("click", function () {
-			deselectAll();
-			setStep(2);
+			deselectAll(wiz);
+			setStep(2, wiz);
 		});
 
 		toStep4.addEventListener("click", function () {
-			deselectAll();
-			setStep(3);
+			deselectAll(wiz);
+			setStep(3, wiz);
+		});
+
+		toStep2InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(1, wizInDialog);
+		});
+
+		toStep3InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(2, wizInDialog);
+		});
+
+		toStep4InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(3, wizInDialog);
 		});
 
-		function deselectAll() {
+		function deselectAll(wiz) {
 			Array.from(wiz.children).forEach(function(step) {
 				step.selected = false;
 			});
 		}
 
-		function setStep(idx) {
-			const step = getStep(idx);
+		function setStep(idx, wiz) {
+			const step = getStep(idx, wiz);
 			step.selected = true;
 			step.disabled = false;
 		}
 
-		function getStep(idx) {
+		function getStep(idx, wiz) {
 			return Array.from(wiz.children)[idx];
 		}
 

diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -34,6 +34,11 @@
 	max-width: 100vw;
 }
 
+:host([stretch]) .ui5-popup-content {
+	width: 100%;
+	height: 100%;
+}
+
 .ui5-popup-content {
 	min-height: var(--_ui5_dialog_content_min_height);
 	flex: 1 1 auto;

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -131,6 +131,82 @@
 		<ui5-textarea id="area" placeholder="Type some text" max-length="2" show-exceeded-text>
 		</ui5-textarea>
 
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
+
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
+
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
+
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
+
+		<div style="padding: 1rem;text-align: center;">
+			<ui5-title level="H2">Hello World!</ui5-title>
+		</div>
+
+		<ui5-select>
+			<ui5-option>Hello</ui5-option>
+			<ui5-option>World</ui5-option>
+		</ui5-select>
+
+		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
+		</ui5-textarea>
+
 		<div slot="footer" style="display: flex; align-items: center;padding: 0.25rem 0.5rem; width: 100%">
 			<div style="flex: 1;"></div>
 			<ui5-button id="btnCloseDialog">Close</ui5-button>