Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Mar 31, 2021

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Mar 31, 2021

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

First, Wizard is scrolling between steps on Safari, inside a Dialog

Screen.Recording.2021-03-31.at.16.33.57.mov

And, the Dialog itself is improved on Safari, previously the footer and the header were not displayed correctly, when the content overflows

Before (Safari)
Screenshot 2021-03-31 at 16 19 54

After (Safari)
Screenshot 2021-03-31 at 16 20 06

@ilhan007 ilhan007 merged commit 573a6c6 into master Mar 31, 2021
@ilhan007 ilhan007 deleted the fix-dialog-stretch-safari branch March 31, 2021 14:15
ilhan007 added a commit that referenced this pull request Mar 31, 2021
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
ilhan007 added a commit that referenced this pull request Mar 31, 2021
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui5-wizard: [Safari] scroll to not work when clicking next button when ui5-wizard in ui5-dialog
2 participants