Vue-select: Overflow: hidden

[n-sviridenko]

Hello!

Would you please to add a container option for dropdown menu to append it to body?
Because when I'm using the select in the div {overflow:hidden}, I see something like this: https://www.evernote.com/l/AZvLW1hFgWRCJY4e_2-tnMgzoxC3s-U8UxY .

[sagalbot]

Hi @n-sviridenko,

I'm not sure I follow, can you expand on what you're looking for? That looks like maybe a z-index issue?

[n-sviridenko]

Hello @sagalbot,

No there is parent (.tab-content) has overflow:hidden, I can add z-index: 99999 to dropdown but it won't work..

[sagalbot]

I'm going to experiment with this a bit and see what I can do.

[KonradDeskiewicz]

Issue was closed but it's still there.
Once vSelect is inside "overflow:hidden" container it's list is cut off by this container. This is especially a problem when working within tabs.

[FedorSherbakov]

Any updates?

[re1naldo]

Can this issue be opened again? It hasn't been fixed until now.

[jadell]

I'd also like this option. We have dropdowns inside fixed-height overflow-hidden divs that can't be made taller (for other reasons.) The dropdown gets cutoff when it's toward the bottom of the div.

As examples, Select2 and Selectize both have a "dropdownParent" option that allow the dropdown menu to be attached to the document.body or other container. Since the DOM element for the dropdown is no longer a child of the fixed-height div, it doesn't get cut off and can be seen fully.

This is the same issue as #509 #406

[pratham2003]

I just landed here while looking for a solution to this problem.
I'll see if I can understand things enough to add support for dropdownParent and create a PR

[H0WARDDD]

It's a very old issue, but it seems not been implemented, any updates? @sagalbot

[sagalbot]

:tada: This PR is included in version 3.7.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release