search

unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
4.9k stars 280 forks source link

[Bug]: DropDown / Select goes outside the view #101

Closed maelp closed 9 months ago

maelp commented 1 year ago

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

When the list is too long, the list goes outside the view, and it's not possible to scroll

Describe the bug

image

Expected behavior

The view should stop at the border of the screen (either top, if the items are shown above the Dropdown / Select, or bottom if shown below) and it should be scrollable

Conext & Screenshots (if applicable)

No response

maelp commented 1 year ago

@zernonia if you have some tips on how I could do a small patch to fix it for now until you have time to make a clean edit I'd love to see it (I'm trying to use this for something in prod haha)

zernonia commented 1 year ago

I think you can add max-height to DropdownMenuContent.vue as see? 😁

maelp commented 1 year ago

yes but I'm not sure that's sufficient: if the screen is small and the dropdown goes "outside the view" but the max-height is bigger than the available space, it is still not going to scroll... not sure if javascript is needed?

maelp commented 1 year ago

Like doing something with this value? https://github.com/radix-vue/radix-vue/blob/main/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue#L108

hrynevychroman commented 9 months ago

I think that this is successfully closed in #264 🙂