V8 Forms - Responsive Design
4 min
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) 1🇲🇩2 = 8px on small screens and 16px on md+ 8px 0 = 8px top and bottom and 0 left/right panel, sectionpanel, flowpanel, flexpanel, stack margin css margin can be a single number which is then based on theme spacing (default is 8px) 1🇲🇩2 = 8px on small screens and 16px on md+ 8px 0 = 8px top and bottom and 0 left/right 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 1fr 1fr 2 columns even width 1fr 2fr 2 columns second is twice as wide 100px 1fr 1fr 3 columns first one fixed width note setting columnstyles overrides the 'columns' settings columnstyles should be used instead of columns a good tutorial for flex box settings is available here https //css tricks com/snippets/css/a guide to flexbox/ 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/ https //css tricks com/almanac/properties/g/grid template columns/