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): width on mobile is not bigger than the phone width #10199

Merged
merged 5 commits into from
Nov 19, 2024

Conversation

LidiyaGeorgieva
Copy link
Contributor

Issue: When the base font in the 'html' element is changed to something different than the default 16px (for example 32px) the width of the dialog can become larger than the width of the phone's display. This is caused by the 'min-width' (20rem) of the dialog. For the dialog on phone it is recommended by the design to set the dialog's property 'stretch' to true to use the full screen size.

The solution: When we have stretched dialog on phone the 'min-width' should not be applied (the width is 100%).

fixes: #10000

Issue: When the base font in the 'html' element is changed to something
different than the default 16px (for example 32px) the width
of the dialog can become larger than the width of the phone's
display. This is caused by the 'min-width' (20rem) of the dialog.
For the dialog on phone it is recommended by the design to set the dialog's
property 'stretch' to true to use the full screen size.

The solution: When we have stretched dialog on phone the 'min-width' should
 not be applied (the width is 100%).

fixes: #10000
packages/main/src/Dialog.ts Outdated Show resolved Hide resolved
packages/main/src/Dialog.ts Outdated Show resolved Hide resolved
packages/main/src/Dialog.ts Outdated Show resolved Hide resolved
packages/main/src/Dialog.ts Outdated Show resolved Hide resolved
packages/main/src/Dialog.ts Outdated Show resolved Hide resolved
packages/main/src/themes/Dialog.css Outdated Show resolved Hide resolved
@LidiyaGeorgieva LidiyaGeorgieva merged commit 77af592 into main Nov 19, 2024
10 checks passed
@LidiyaGeorgieva LidiyaGeorgieva deleted the ui5-dialog-stretch-min-width branch November 19, 2024 09:23
@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This PR is included in version v2.5.0-rc.1 🎉

The release is available on v2.5.0-rc.1

Your semantic-release bot 📦🚀

LidiyaGeorgieva added a commit that referenced this pull request Nov 26, 2024
…10199)

Issue: When the base font in the 'html' element is changed to something
different than the default 16px (for example 32px) the width
of the dialog can become larger than the width of the phone's
display. This is caused by the 'min-width' (20rem) of the dialog.
For the dialog on phone it is recommended by the design to set the dialog's
property 'stretch' to true to use the full screen size.

The solution: When we have stretched dialog on phone the 'min-width' should
 not be applied (the width is 100%).

fixes: #10000
downport of #10199
LidiyaGeorgieva added a commit that referenced this pull request Dec 2, 2024
…10255)

Issue: When the base font in the 'html' element is changed to something
different than the default 16px (for example 32px) the width
of the dialog can become larger than the width of the phone's
display. This is caused by the 'min-width' (20rem) of the dialog.
For the dialog on phone it is recommended by the design to set the dialog's
property 'stretch' to true to use the full screen size.

The solution: When we have stretched dialog on phone the 'min-width' should
 not be applied (the width is 100%).

fixes: #10000
downport of #10199
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.

Dialog: Dialog content alignment issue with zoom
4 participants