SelectMenu popper position inside a Card

[ChristopheCVB]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: npm@9.4.2
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxt/ui@2.11.0
• Build Modules: -

Version

v2.11.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-toondf?file=app.vue

Description

When using a SelectMenu, with the default popper strategy (absolute), inside a Card, the popper div does not overflow and creates a non usable UI

Additional context

The options div gets cropped

Using the fixed strategy doesn't really fix the problem as the options div takes up the full width

Logs

No response

[connerblanton]

The UCard default base config has an overflow-hidden class. If you add :ui="{ base: 'overflow-visible' }" to the UCard, this should fix that for you 😃

[benjamincanac]

For reference: #806

[ChristopheCVB]

The UCard default base config has an overflow-hidden class. If you add :ui="{ base: 'overflow-visible' }" to the UCard, this should fix that for you 😃

True, but the overflow-visible breaks the Card's rounded corners

[benjamincanac]

It's better to remove it completely: #806 (comment)

[connerblanton]

It shouldn't break the corners. At least it's not here https://stackblitz.com/edit/nuxt-starter-qmhfww?file=app.vue

Benjamin is right though, better to remove it completely

[ChristopheCVB]

My bad, I was not setting the background on the right property 😞

[benjamincanac]

I've decided to remove the overflow-hidden from the Card by default so you won't have to do this anymore.