quasar icon indicating copy to clipboard operation
quasar copied to clipboard

Ugly padding in sticked q-dialog in capacitor/cordova mode on ios

Open FragsterAt opened this issue 10 months ago • 0 comments

What happened?

Image

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

FragsterAt avatar Apr 18 '25 13:04 FragsterAt