Skip to content

Commit 573a6c6

Browse files
ilhan007ilhan007
authored
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
1 parent d6b6fa4 commit 573a6c6

File tree

3 files changed

+114
-16
lines changed

3 files changed

+114
-16
lines changed

‎packages/fiori/test/pages/Wizard_test.html

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
</ui5-wizard>
176176

177177
<ui5-dialog id="dialog" stretch header-heading="Wizard">
178-
<ui5-wizard>
178+
<ui5-wizard id="wizInDialog">
179179
<ui5-wizard-step icon="sap-icon://product" selected heading="Product type">
180180
<div style="display: flex; min-height: 200px; flex-direction: column;">
181181
<ui5-title>1. Product Type</ui5-title><br>
@@ -190,7 +190,7 @@
190190
<ui5-input></ui5-input>
191191
</div>
192192

193-
<ui5-button design="Emphasized">Step 2</ui5-button>
193+
<ui5-button id="toStep2InDialog" design="Emphasized">Step 2</ui5-button>
194194
</ui5-wizard-step>
195195

196196
<ui5-wizard-step heading="Product Information">
@@ -231,7 +231,7 @@
231231
</div>
232232
</div>
233233

234-
<ui5-button design="Emphasized">Step 3</ui5-button>
234+
<ui5-button id="toStep3InDialog" design="Emphasized">Step 3</ui5-button>
235235
</ui5-wizard-step>
236236

237237
<ui5-wizard-step heading="Options">
@@ -272,7 +272,7 @@
272272
</div>
273273
</div>
274274

275-
<ui5-button design="Emphasized">Step 4</ui5-button>
275+
<ui5-button id="toStep4InDialog" design="Emphasized">Step 4</ui5-button>
276276
</ui5-wizard-step>
277277

278278
<ui5-wizard-step heading="Pricing">
@@ -311,6 +311,7 @@
311311

312312
<script>
313313
var wiz = document.getElementById("wizTest");
314+
var wizInDialog = document.getElementById("wizInDialog");
314315
var counter = 0;
315316
wiz.addEventListener("ui5-selection-change", function (event) {
316317
console.log(event.detail.selectedStep);
@@ -319,37 +320,53 @@
319320
});
320321

321322
toStep2.addEventListener("click", function () {
322-
deselectAll();
323-
setStep(1);
323+
deselectAll(wiz);
324+
setStep(1, wiz);
324325
});
326+
325327
toStep22.addEventListener("click", function () {
326-
deselectAll();
327-
setStep(1);
328+
deselectAll(wiz);
329+
setStep(1, wiz);
328330
});
329331

330332
toStep3.addEventListener("click", function () {
331-
deselectAll();
332-
setStep(2);
333+
deselectAll(wiz);
334+
setStep(2, wiz);
333335
});
334336

335337
toStep4.addEventListener("click", function () {
336-
deselectAll();
337-
setStep(3);
338+
deselectAll(wiz);
339+
setStep(3, wiz);
340+
});
341+
342+
toStep2InDialog.addEventListener("click", function () {
343+
deselectAll(wizInDialog);
344+
setStep(1, wizInDialog);
345+
});
346+
347+
toStep3InDialog.addEventListener("click", function () {
348+
deselectAll(wizInDialog);
349+
setStep(2, wizInDialog);
350+
});
351+
352+
toStep4InDialog.addEventListener("click", function () {
353+
deselectAll(wizInDialog);
354+
setStep(3, wizInDialog);
338355
});
339356

340-
function deselectAll() {
357+
function deselectAll(wiz) {
341358
Array.from(wiz.children).forEach(function(step) {
342359
step.selected = false;
343360
});
344361
}
345362

346-
function setStep(idx) {
347-
const step = getStep(idx);
363+
function setStep(idx, wiz) {
364+
const step = getStep(idx, wiz);
348365
step.selected = true;
349366
step.disabled = false;
350367
}
351368

352-
function getStep(idx) {
369+
function getStep(idx, wiz) {
353370
return Array.from(wiz.children)[idx];
354371
}
355372

‎packages/main/src/themes/Dialog.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
max-width: 100vw;
3535
}
3636

37+
:host([stretch]) .ui5-popup-content {
38+
width: 100%;
39+
height: 100%;
40+
}
41+
3742
.ui5-popup-content {
3843
min-height: var(--_ui5_dialog_content_min_height);
3944
flex: 1 1 auto;

‎packages/main/test/pages/Dialog.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,82 @@
131131
<ui5-textarea id="area" placeholder="Type some text" max-length="2" show-exceeded-text>
132132
</ui5-textarea>
133133

134+
<div style="padding: 1rem;text-align: center;">
135+
<ui5-title level="H2">Hello World!</ui5-title>
136+
</div>
137+
138+
<ui5-select>
139+
<ui5-option>Hello</ui5-option>
140+
<ui5-option>World</ui5-option>
141+
</ui5-select>
142+
143+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
144+
</ui5-textarea>
145+
146+
<div style="padding: 1rem;text-align: center;">
147+
<ui5-title level="H2">Hello World!</ui5-title>
148+
</div>
149+
150+
<ui5-select>
151+
<ui5-option>Hello</ui5-option>
152+
<ui5-option>World</ui5-option>
153+
</ui5-select>
154+
155+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
156+
</ui5-textarea>
157+
158+
159+
<div style="padding: 1rem;text-align: center;">
160+
<ui5-title level="H2">Hello World!</ui5-title>
161+
</div>
162+
163+
<ui5-select>
164+
<ui5-option>Hello</ui5-option>
165+
<ui5-option>World</ui5-option>
166+
</ui5-select>
167+
168+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
169+
</ui5-textarea>
170+
171+
172+
<div style="padding: 1rem;text-align: center;">
173+
<ui5-title level="H2">Hello World!</ui5-title>
174+
</div>
175+
176+
<ui5-select>
177+
<ui5-option>Hello</ui5-option>
178+
<ui5-option>World</ui5-option>
179+
</ui5-select>
180+
181+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
182+
</ui5-textarea>
183+
184+
185+
<div style="padding: 1rem;text-align: center;">
186+
<ui5-title level="H2">Hello World!</ui5-title>
187+
</div>
188+
189+
<ui5-select>
190+
<ui5-option>Hello</ui5-option>
191+
<ui5-option>World</ui5-option>
192+
</ui5-select>
193+
194+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
195+
</ui5-textarea>
196+
197+
198+
<div style="padding: 1rem;text-align: center;">
199+
<ui5-title level="H2">Hello World!</ui5-title>
200+
</div>
201+
202+
<ui5-select>
203+
<ui5-option>Hello</ui5-option>
204+
<ui5-option>World</ui5-option>
205+
</ui5-select>
206+
207+
<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
208+
</ui5-textarea>
209+
134210
<div slot="footer" style="display: flex; align-items: center;padding: 0.25rem 0.5rem; width: 100%">
135211
<div style="flex: 1;"></div>
136212
<ui5-button id="btnCloseDialog">Close</ui5-button>

0 commit comments

Comments
 (0)