Skip to content

FormLayout: optionally turn off auto width calculation for items and allow setting item width manually #676

@sergetania

Description

@sergetania

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
image
However, when the actual field widths vary this results in the following
image

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
image
which results in perfectly placed fields in a form layout
image

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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions