quasar
quasar copied to clipboard
Ugly padding in sticked q-dialog in capacitor/cordova mode on ios
What happened?
What did you expect to happen?
no backdrop between q-card and screen border
Reproduction URL
https://codepen.io/FragsterAt/pen/WbbbYdr
How to reproduce?
Show q-dialog with position: 'bottom' in capacitor or cordova mode in IOS.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Capacitor Mode
Platforms/Browsers
iOS
Quasar info output
Relevant log output
Additional context
the reason is https://github.com/quasarframework/quasar/blob/a53256267ff0c63865e24ea97279b7762105bf8e/ui/src/components/dialog/QDialog.sass#L84 for sticked dialogs padding must be added on child div like that:
.q-dialog
.q-dialog__inner.q-dialog__inner--bottom > div
padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 30px) // base padding 30px
body.q-ios-padding
.q-dialog
.q-dialog__inner.q-dialog__inner--bottom
padding-bottom: 0 !important // workaround on ios