List of items cutoff when containing div not big enough

[osuwariboy]

Okay, so I've been working to get around this bug for days now and I just can't figure out how to do it. The problem is that the content of the list is actually part of its container, which means that when the list appears, its content can get easily truncated if said container is too small. Then, things get exponentially more complex when your container defines its own stacking context (i.e. when you define position: relative or change opacity and so on) and no matter how high you set the z-index, it won't matter one bit.

Reproduction Link

https://jsfiddle.net/6bLfng14/1/

Steps to reproduce

Basically, all you have to do is put your list inside a div and put overflow: hidden as its CSS property. Either the list will appear truncated or completely hidden depending on the available space (just follow my jsfiddle link above, you'll see what I mean).

Expected behaviour

Maybe it's just me, but I would expect the list's content to appear floating above everything else on the page... not being part of its actual container.

Actual behaviour

The list's content is actually part of its container which means it's actually truncated when said container is too small to display it.

[ghost]

Hey man, did you fix this or did you find a way to evade it in the end?

[osuwariboy]

In the end, I had to resort to using a standard selectbox instead of this plugin. I found a couple of ways to get the list's content to appear by toying with overflow and stuff like this. Sadly, none of them were viable in my specific context. The only thing that actually worked was when I physically moved the list to the root of the document using Javascript. But doing that caused all sort of other problems down the line since your plugin now had trouble finding its own content. Solving these meant in turn I would need to hack vue-multiselect, which was not something I had time to do.

On the other hand, I really love vue-multiselect and if you need my help to test some fixes you put out, i'd be more than willing to do it.

[arctic-ice-cool]

I've just had a quick look at my app and how we worked around this issue. This isn't meant to be provided as any means of solution, however, my work-around for this was to wrap Vue-Multiselect in a modal component, where we could actually toggle the overflow property on the modal when there's a single vue-multiselect instance in that modal. Meaning if we knew the modal (container) was just showing a vue-multiselect, we would allow overflow on that container. Otherwise, it would default as overflow:hidden.

What am I saying?

I'm saying just have a good think about your use case, and whether it's at all possible to actually just have a vue component prop that specifies whether your container is in fact overflow:hidden or not - and if you can just pass that Boolean as a prop to your container, that will then allow vue-multiselect to escape its parent freely.

Obviously, this doesn't work if you have a complex layout where vue-multiselect could be at the bottom of a long container, however if you are using it in a simple way then this could work.

Vue-multiselect is by far worth persevering with compared to a traditional select, and if you provide more about your use-case, maybe someone can come up with a temporary work around until someone has the time to invest in a proper fix.

[osuwariboy]

Thanks for the tip arctic-ice-cool. Your solution is interesting, but sadly impossible to apply in my case. For one thing, my vue-multiselect component is already located inside of a modal and then... well here's a screenshot of my modal to better illustrate what I have to deal with.

• First level is the window itself in green (not very visible on the outside, sorry)
• Second level is the blue color which has the title up top and the rest
• Third level is the red color which separates between the grayish area with the car and the part below with the sliders

All those are div tags with their own stacking context. This means that to display the content of the list on top of the modal, you'd somehow need to pull the content out of three levels of div. Also, did I mention that the bottom blue DIV has scrolling enabled when there are too many sliders to display? Yeah, I think I'm screwed here lol. Anyway, if someone finds a way for me to solve this, I'll gladly test out their solution :).

[arctic-ice-cool]

Maybe a https://codepen.io/pen/ might help allow someone to come up with a temporary work-around for you.

[eybarta]

The best solution for this IMO was to have a SLOT for the whole option list rather than only single options, then you could probably use vue-portal component to render the whole list to appropriate container (body mainly)

[ademat]

Hi, has someone found a solution for this issue? I have a very similar use case to what @osuwariboy mentioned.