Is your feature request related to a problem? Please describe.
When the form builder contains wide components (e.g., a Table or DataGrid with 10–20 columns, or a Columns layout with many narrow col-1/col-2 columns), the horizontal scroll of .formarea causes the left sidebar (.formcomponents) to scroll out of view. Users then lose access to the component palette while working on wide forms.
Additionally, when the sidebar scrolls away, the absolute-positioned .component-btn-group (hover action buttons) on left-most cells gets clipped by the overflow container, making the action buttons inaccessible.
Describe the solution you'd like
A native builder configuration option to make the sidebar independently scrollable and fixed relative to the viewport (or its scroll container), for example:
Formio.builder(el, schema, { sidebarScrollable: true // sidebar stays fixed while formarea scrolls independently });
This would internally apply position: sticky or overflow-y: auto with a fixed height on .formcomponents, without requiring consumers to patch FormIO's CSS.
Describe alternatives you've considered
CSS override of .formcomponents with position: sticky — works but fragile across host app layouts and breaks when the parent container has overflow: hidden.
CSS centering of .component-btn-group with left: 50%; transform: translateX(-50%) — partially mitigates the clipping but does not solve the sidebar usability issue.
Additional context
@formio/js version: 5.3.2
Reproducible with: Table component, 20 columns, each containing a text field — hover over column 1 in builder mode.
Is your feature request related to a problem? Please describe.
When the form builder contains wide components (e.g., a Table or DataGrid with 10–20 columns, or a Columns layout with many narrow col-1/col-2 columns), the horizontal scroll of .formarea causes the left sidebar (.formcomponents) to scroll out of view. Users then lose access to the component palette while working on wide forms.
Additionally, when the sidebar scrolls away, the absolute-positioned .component-btn-group (hover action buttons) on left-most cells gets clipped by the overflow container, making the action buttons inaccessible.
Describe the solution you'd like
A native builder configuration option to make the sidebar independently scrollable and fixed relative to the viewport (or its scroll container), for example:
Formio.builder(el, schema, { sidebarScrollable: true // sidebar stays fixed while formarea scrolls independently });This would internally apply position: sticky or overflow-y: auto with a fixed height on .formcomponents, without requiring consumers to patch FormIO's CSS.
Describe alternatives you've considered
CSS override of .formcomponents with position: sticky — works but fragile across host app layouts and breaks when the parent container has overflow: hidden.
CSS centering of .component-btn-group with left: 50%; transform: translateX(-50%) — partially mitigates the clipping but does not solve the sidebar usability issue.
Additional context
@formio/js version: 5.3.2
Reproducible with: Table component, 20 columns, each containing a text field — hover over column 1 in builder mode.