Form Responsive Design
Activate forms can be designed to be responsive to the screen size of the client device. This is a standard way of creating forms that change depending upon the client. Typically the following changes can be made:-
- Hide or Show Elements based on the screen size
- Change columns on grids. For example, on a small screen there is a single column and on larger screens multiple.
- Flow/Flex Panels change the display from Columns to Rows on a smaller screen.
Breakpoints
Breakpoints are used to control what happens at a specific fixed screen width.
Each breakpoint (a key) matches with a fixed screen width (a value):
- xs, extra-small: 0px
- sm, small: 600px
- md, medium: 900px
- lg, large: 1200px
- xl, extra-large: 1536px
Responsive Properties
There are certain components and properties that can be used to control a responsive control. These properties have a semi-colon";" separated list of values that can use the breakpoint names above.
- The first value is for the "xs" screen size this means that the first value.
- Values apply to that screen size and larger unless overridden.
For example, a Panel allows a Display property. This corresponds to the equivalent CSS display property.
For example, the following Panel will be hidden on xs and sm screen sizes and be displayed on 'md' or larger screens.
<Panel Display="none; md: block"></Display>
The following Panel with be displayed on xs and sm screens but hidden on larger screens.
<Panel Display="block; md: none"></Display>
Responsive Controls
The following controls and properties are responsive aware
| | |
|---|---|---|
Control | Property | Example |
Panel, SectionPanel, FlowPanel, FlexPanel, Stack | Display | Css Display - As above |
Panel, SectionPanel, FlowPanel, FlexPanel, Stack | Padding | Css Padding Can be a single number which is then based on theme spacing (default is 8px) |
Panel, SectionPanel, FlowPanel, FlexPanel, Stack | Margin | Css Margin Can be a single number which is then based on theme spacing (default is 8px) |
FlowPanel, FlexPanel, Stack | Spacing | This is the spacing between children. By default this is '2' which is 2 spacing units or (16px). |
FlexPanel | Wrap | Css Wrap valid values: wrap, no-wrap |
FlexPanel | Direction | Css flex-direction row | row-reverse | column | column-reverse |
FlexPanel | AlignItems | align-items: flex-start | flex-end | center | baseline | stretch |
FlexPanel | AlignContent | css align-content flex-start | flex-end | center | space-between | space-around | stretch |
FlexPanel | JustifyContent | css justify-content flex-start | flex-end | center | space-between | space-around | space-evenly |
GridPanel | ColumnsStyles | css grid-template-columns Examples |
- 8px 0 = 8px top and bottom and 0 left/right
- 1🇲🇩2 = 8px on small screens and 16px on md+
- 8px 0 = 8px top and bottom and 0 left/right
- 1🇲🇩2 = 8px on small screens and 16px on md+
Note setting ColumnStyles overrides the 'Columns' settings. ColumnStyles should be used instead of Columns.
- 100px 1fr 1fr - 3 columns first one fixed width
- 1fr 2fr - 2 columns second is twice as wide
- 1fr 1fr - 2 columns even width
A good tutorial for flex-box settings is available here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A good tutorial for grid column settings is available here: https://css-tricks.com/almanac/properties/g/grid-template-columns/