-
Notifications
You must be signed in to change notification settings - Fork 87
Description
The FormLayout component will benefit from adding an option to disable auto width calculation for layout items and also adding an API to manually set item width. Currently, the form layout always sets the width of all columns to be the same. For example, a layout with 3 items will have item widths set to 33%(roughly) of the overall width
However, when the actual field widths vary this results in the following
In certain cases, it is very helpful to have manual control over the width of the layout. For example, a page may have multiple layouts with many input fields to enter personal information that includes address. It is very convinient for the user to see the street address, city and state fields on one line and these 3 fields do not have the same width (state abbr is very short). It is not practical to use a horizontal layout because we want the same features for the address fields as for the rest of the fields on the page that are items in form layouts - labels, responsiveness, etc - these are provided by the form layout component.
Here is an example when the generated item width is turned off
which results in perfectly placed fields in a form layout
The form layout needs an option to turn off setting the width of all items to the same value and an API to manually set item width (though the width of the field an item contains is known but currently ignored because all items must have the same width)