With this layout added content can be expanded to the full width of a
row.
The default HTML behavior is that all items are positioned
right next to each other. If the space within the parent container
becomes too small, the browser wraps the corresponding item to the
next line. In this case the space within a line isn't used.
With this layout each added content can be shrinked to a set
min-width. So the layout shinks it until this set value and warps it
if necessary. Each content within a line will be maximized to fit the
whole line. Each content item can have a weight corresponding to other
items within a line. If one item has the weight of '2' and all others
have '1' so this single item will always be twice of all others. These
properties can be set via
sap.ui.layout.ResponsiveFlowLayoutData
.
Detailed information of properties etc. can be found in the API documentation
A LayoutData instance can be added to a control that should be used
within the ResponsiveFlowLayout. With this instance other values than
the default values can be used.
Default values are:
IMPORTANT: To ensure that a content is enlarged is has to be sized to 100%!
For detailed information about the LayoutData please see the API documentation
These items are just added as they are. The TextField have the weight of '2'. All content items are set to '100%' to ensure that they are enlarged on resize.
In this case the Panel is the content item the layout takes care of. The layout doesn't know what's inside of the Panel. So the Panel is responsible for the positioning of the Labels and TextFields.
In this case the Label and the TextField belong together. If the space becomes too less the TextField is wrapped below the Label. If the space is continuing shrinking, the part of the 'Last name' is wrapped below the 'First name' stuff.