Dropdown clipped when using overflow on outer div

[vivekvs1]

Hi,

The dropdown seems to render inside the div container, even if only one axes of the div has been rendered with 'scroll' : for eg: 'overflow-x':'scroll'. How do I change this behaviour? This issues seems to be affecting the Dash Docs as well.

[vivekvs1]

Is there any workaround to this? I tried to set the z-index for the .Select-menu-outer {
}, but couldn't get it to work :(

[Marc-Andre-Rivet]

The short answer to this one is no with the current implementation. The relative parent of that dropdown is inside the table component, which sits inside the "no-overflow" div container, hence getting clipped (or requiring scroll).

The dropdown would need to be rendered with position: fixed and programmatically moved on scroll/resize, etc.

Will tag as an enhancement as it is a legitimate limitation, but there's no plan to address this issue for now.

[vivekvs1]

I see. Thanks for the update @Marc-Andre-Rivet. Is there a quick workaround or cheat - an example would be useful if possible :)

I understand that so many new features that are more important are currently being implemented. So i'll wait.
THanks :)

[ric-evans]

Has there been any progress toward fixing this bug? This essentially prevents data entry.

@vivekvs1 Were you able to find a workaround?

[alexobrads]

Would love to see this resolved