ResponsiveFlowLayout

Introduction

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

LayoutData

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


Example1 - A layout with 4 content items

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.


Example2 - A layout with the items from above but in a Panel

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.


Example3 - A little responsive form

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.

API Documentation

See API documentation