How to auto adjust number of columns in DynamicForm when window size changes

[gilberth]

Hi, in our design, there are 5 FormItems per row in a DynamicForm by the following implementation

dynamicForm.setNumCols(5);
dynamicForm.setWidth100();
dynamicForm.setColWidths(240, 240, 240, 240, 240);
...
// construct formItems array here
...
dynamicForm.setFields(formItems);

But the FormItems will be clipped out when the window size changes.
I want the FormItems to auto adjust their place when the window size changes, for example, wrap to the next row.
Is there any way for DynamicForm to achieve this? Thanks in advance.

[Isomorphic]

You can simply call setNumCols() based on the available space.

However do note that this is an unusual design - forms usually don't do this, and one of the reasons is that shifting items around ruins the end user's spatial memory as to placement of fields. You are probably better off with either horizontal scrolling, or exactly two versions of the form, one for a wider screen and one for a narrower, each hand-designed rather than freely reflowing.

[gilberth]

Thanks Isomorphic,
Can you specify how to enable horizontal scrolling? In my case, the whole content is being cutoff when I drag to change window size and there is no scroll bar at the bottom of the window. I think it is OK if there is scroll bar so that user can see the whole content with scrollbar enabled.

[Isomorphic]

Set the form's width to 100% and it's overflow to auto

[gilberth]

Thanks Isomorphic,
I've tried the overflow setting of the form, it works but since there are more than one DynamicForm object in the same view, there will be multiple scrollbars in the same view which we don't think it is suitable for our UI design.
Do you have any suggestion to achieve this? I mean, auto arrange the FormItems that are added to DynamicForm when user adjusts the window size.

[Isomorphic]

We already explained how to do that and why it’s probably a bad idea. See above.

[gilberth]

Thanks for providing information.
We might need to find other ways instead of using DynamicForm to compose this view according to your comments.

[Isomorphic]

You can put all the forms in a VLayout and apply the size/overflow settings to that layout instead of each form.

[gilberth]

Thanks, that's the way now I am using.