Currently, the Choices dropdown is always rendered within the .choices wrapper
When the field is placed inside a scrollable container, modal, or element with overflow: auto/hidden, the dropdown gets clipped and becomes partially unusable. Please find the below screenshot
Many UI libraries (Select2, Popper-based components, etc.) provide an appendTo / portal option to render the dropdown outside the local DOM context (commonly document.body) while positioning it relative to the input.
Adding a similar option in Choices would greatly improve usability in complex layouts.
Why this is a must-have
In modern UIs, forms are commonly placed inside:
- Modals
- Side panels
- Scrollable dashboards
- Fixed / sticky layouts
Without an appendTo option, developers are forced to implement fragile workarounds (manually moving the dropdown to body, recalculating position, handling scroll/resize), which defeats the purpose of using a library.
Most comparable select libraries provide this capability out of the box.
Currently, the Choices dropdown is always rendered within the .choices wrapper
When the field is placed inside a scrollable container, modal, or element with overflow: auto/hidden, the dropdown gets clipped and becomes partially unusable. Please find the below screenshot
Many UI libraries (Select2, Popper-based components, etc.) provide an appendTo / portal option to render the dropdown outside the local DOM context (commonly document.body) while positioning it relative to the input.
Adding a similar option in Choices would greatly improve usability in complex layouts.
Why this is a must-have
In modern UIs, forms are commonly placed inside:
Without an appendTo option, developers are forced to implement fragile workarounds (manually moving the dropdown to body, recalculating position, handling scroll/resize), which defeats the purpose of using a library.
Most comparable select libraries provide this capability out of the box.