Open maelp opened 7 months ago
@maelp Thank for your reproduction 👍
Based on radix-vue docs you can limit available height to define scroll, but this is not the approach you are chasing.
I made a small fix on your repo where just added min-h-[100px]
to PopoverContent
component. reproduction. This forces Radix-vue to recalculate position and place Content
above our trigger.
@sadeghbarati Hello mate, I don't think this issue is valid to shadcn-vue
repo, maybe need to update radix-vue
docs, what do you think?
@romanhrynevych Hello Roman, sure, go ahead
I'm not familiar with FloatingUI stuff
@sadeghbarati @romanhrynevych any update on this? is there a way to fix this without having to introduce an arbitrary size limit?
@romanhrynevych the bug still exists when we add the Combobox in a Dialog, any idea how to fix this?
@maelp Everything works fine for me, can you add some screenshots?
If you make the window smaller it doesn't display correctly
Based on same logic with min-h
, just increase size to 210px
taken from screenshot and everything works fine 🙂
Reproduction: https://stackblitz.com/edit/fls328-chcabe?file=src%2FApp.vue
hmmmm weird, I'd rather not use a large min-h, because otherwise if there's only a few options it will be "mostly empty" no? @sadeghbarati
I've been finding the same issue. In my case I found that adding a max height to the <CommandList>
made it adjust its position e.g.
<CommandList class="max-h-[140px]">
I see that Radix Vue now has a dedicated Combobox component so I'm not sure if the idea is to replace this with that, or continue to use the Popover/Command for it?
Reproduction
https://stackblitz.com/edit/fls328?file=src%2FApp.vue
Describe the bug
When the combobox is at the bottom of the view (or more commonly: at the bottom of an AlertDialog or whatever) it can often "leave the window", and doesn't seem to use avoid-collisions to show on the right side
System Info
Contributes