WS Form form layouts typically work with a 12 column grid (Learn more about responsive layouts). In addition to the grid, we also support different layouts for different breakpoints. A breakpoint represents a device screen width such as a mobile device, tablet, laptop or desktop computer.
WS Form supports different checkbox or radio grid configurations for each breakpoint. This means you can have a single column layout on mobile and a multi column layout on larger screen sizes, making the layout fully responsive.
If you are on a computer, drag your web browser width to view the following responsive demo.
- Click the field settings icon. This will open up the field settings sidebar.
- Under the ‘Layout’ section of the sidebar is the ‘Orientation’ setting. Select ‘Grid’.
- After selecting ‘Grid’, the breakpoints for the current framework will be shown. For each breakpoint you can configure a column width. The full width will result in a single column format. The 1/2 with will result in a two column format, and so on. If you choose a column width on the smallest breakpoint, the larger breakpoints will inherit that same width unless you manually override that with a different value. An example configuration is shown below:
- The ‘Optimize’ button will enable if WS Form can help with improving the efficiency of the breakpoint configuration. Simply click on ‘Optimize’ and WS Form will automatically reconfigure the widths. If you want to reset all of the widths and start over with a new configuration, click ‘Reset’.
- Click ‘Save’ and then click ‘Preview’ to try your grid configuration.