The choices dropdown does not overlap the datagrid and causes vertical scroll because our datagrid component has overflow-x set to auto so that the horizontal scroll appears when it has many child components that dees not fit the screen width.
When overflow-x is set to any value except 'visible', the overflow-y gets value 'auto' even if we set it to 'visible' by css that causes vertical scroll when select dropdown is open. In other words, if we are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
The workaround for it is to position the dropdown against any element outside the container with overflow-x.
So, this PR sets position 'fixed' for choices select dropdown when the component is inside the datagrid.
How has this PR been tested?
Manually
Checklist:
[ ] I have commented my code, particularly in hard-to-understand areas
[ ] I have made corresponding changes to the documentation (if applicable)
[x] My changes generate no new warnings
[ ] My changes include tests that prove my fix is effective (or that my feature works as intended)
[x] New and existing unit/integration tests pass locally with my changes
[ ] Any dependent changes have corresponding PRs that are listed above
Link to Jira Ticket
https://formio.atlassian.net/browse/FIO-7548
Description
What changed?
The choices dropdown does not overlap the datagrid and causes vertical scroll because our datagrid component has overflow-x set to auto so that the horizontal scroll appears when it has many child components that dees not fit the screen width. When overflow-x is set to any value except 'visible', the overflow-y gets value 'auto' even if we set it to 'visible' by css that causes vertical scroll when select dropdown is open. In other words, if we are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto. The workaround for it is to position the dropdown against any element outside the container with overflow-x. So, this PR sets position 'fixed' for choices select dropdown when the component is inside the datagrid.
How has this PR been tested?
Manually
Checklist: