|
|
|
|
|
|
|
|
Flexbox example: ratios to distribute available space among controls
In a flexbox container, you can define ratios for the different controls so that they take up a given amount of space. With the Flexbox control, you can set a ratio for each control. This ratio will be applied as the page is enlarged. In the following example, there are 4 input areas (Edit controls) inside a Looper control.
When the browser is enlarged horizontally, the first 2 input areas must remain at a fixed width and the extra space must be distributed as follows: 20 % for the third area (Full name), 80 % for the fourth area (Description).Â
These anchors can be defined with a Flexbox control. Remark: This page is based on the "WW_Flexbox" example. To set specific anchors on the input areas inside the Looper control, you can: - Create a Flexbox control. This Flexbox control should be inside a row of the Looper control and contain the different Edit controls. In our example, there are 4 Edit controls.
- The different controls are listed in the "General" tab of the Flexbox control description. To get the desired resize behavior, simply specify a flex-grow value for the third and fourth controls. In this case, there are four Edit controls. The following options must be modified:
- set the flex-grow value of the third Edit control to 20.
- set the flex-grow value of the fourth Edit control to 80.
- No changes are required in the "Details" tab.
Related Examples:
|
Training (WEBDEV): WW_Flexbox
[ + ] This example presents the Flexbox control, which determines the positioning of the controls it contains.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|