Choices: Absolute positioning of dropdown can cause problems

[ckotzbauer]

I integrated choices in our application and had a problem with the internal structure of this library:
The ".choices" div is relative positioned, but the ".choices__list--dropdown" child-div has a absolute position.
There are several places in our app where the box is inside a relative positioned container. The dropdown cannot be displayed outside of the container-div then, so it is partially hidden.

The "workaround" is to make the ".choices" div also absolute and set its position manually. But that's not really nice and has several edge cases...

Is it possible to change this structure in a future-release?

[kosmiq]

Have you tried setting, via CSS, "overflow: visible" to the container that you use? That should let your dropdowns flow outside of it

Example, first half without overflow: visible on the container (a modal in this case), the second half the same modal and same dropdown but with overflow: visible set.

[ckotzbauer]

Thanks for the tip, it worked. Changing the overflow of the containers fixed all our issues with the dropdown!

[muenchris]

Unfortunately that does not work if a further-up parent is setting overflow:hidden.
In our solution the combo is in a form that has div that must clip its children if "collapsed". Therefore I cannot remove the overflow:hidden on the form parent (3 parents of the select box).
Other libraries solve this by having the dropdown div as a child of "body" and position it manually.
I might have to do this in case there is no easier workaround

[kosmiq]

If you have collapsed functionality you could set overflow hidden when collapsed and overflow visible when not collapsed? I assume you use some JS to trigger collapsing?

[muenchris]

That would work for the collapsing group but not for the "card" the collapsible group is in. Which is in another DIV representing a group of cards (divs) which again is overflow:hidden.
The only way is to use "fixed" and position the dropdown "somewhere". For Phones I am thinking about moving the dropdown to the bottom of the screen anyway, but for Desktop browsers should the dropdown be close to the field.