Modal With Form on Mobile is Covered by Keyboard Input

[ilrein]

Environment

---

• Operating System: Darwin
• Node Version: v21.6.1
• Nuxt Version: 3.10.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: extends, modules, app, ui, imports, devtools
• Runtime Modules: @nuxt/[email protected], @pinia/[email protected]
• Build Modules: -

---

Version

"@nuxt/ui": "^2.13.0"

Reproduction

Description should be clear enough.

Description

When a Modal has a Form inside of it, and you go on mobile, the bug happens.

The modal always goes to the bottom of the screen. When the keyboard input opens, it covers the modal.

Closing the keyboard input reveals the unseen mobile modal.

I would suggest moving the modal to the top, or to compensate for the keyboard dynamically and be placed therefore somewhere in the top-middle.

Additional context

No response

Logs

No response

[antalasztrik]

In my application the Modal respects the keyboard and moves up, if the keyboard is opened, so can't really reproduce your issue.

However, if it's not the case for you, you can update the config of the modal, to show it wherever you want to. The default config for the container is container: 'flex min-h-full items-end sm:items-center justify-center text-center', which makes the modal sit at the bottom of the screen when viewed on mobile. But you can update it to the following, to have it centered:

<UModal :ui={ 'container': 'items-center' }>
   ...your modal content here
</Umodal>

Or to have it show up at the top:

<UModal :ui={ 'container': 'items-start' }>
   ...your modal content here
</Umodal>

[moshetanzer]

Hi @ilrein,

Based on my tests on latest IOS Safari and chrome this does not occur (also chrome on latest android). What device and browser did you encounter this on? It could be the keyboard will cover a bit of modal, but should zoom in to input?

[Right-Brain-Group]

I am experiencing the same issue on the most up to date IOS on IPhone 15 with Safari and chrome. I am seeing this happen to every Modal on Nuxt UI site as well. Many thanks for any help.

[Right-Brain-Group]

I was able to fix be centering the modal from config. I'm thinking it might have to do with h-dvh. Need to dig in more.

[moshetanzer]

@Right-Brain-Group Have you tested with svh? Could be though issue with dvh.