nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.87k stars 478 forks source link

Modal With Form on Mobile is Covered by Keyboard Input #1346

Open ilrein opened 7 months ago

ilrein commented 7 months ago

Environment


Version

"@nuxt/ui": "^2.13.0"

Reproduction

Description should be clear enough.

Description

Screen Shot 2024-02-10 at 9 02 12 AM

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 commented 7 months ago

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 commented 6 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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