Survey123 Tricks of the Trade: Grid layout in Survey123 web designer
Starting from 2025 July release, grid layout can be set up in web designer. This blog will walk you through how to apply grid layout in Survey123 web designer.
If you are interested in grid layout in Survey123 Connect, please check out Survey123 Tricks of the Trade: Groups, Grids and Pages.
Design grid layout in web designer using column based method
1. Increase column number of pages and groups to start using grid layout. In below example, setting it to 8 divides each row into eight columns of equal width. By default, groups and questions occupy one column each.
2. Span property is introduced along with column and it controls how many columns from the page or groups our questions occupy. Similar to below example, we could drag the end of question horizontally and stop when span is 3. It means this question occupies 3 columns of its containing group.
Limitation: when there is only one page in web designer, we couldn't adjust spans of questions outside of groups.
To accelerate design process, we could select multiple questions to reset to one width at the same time. Use Ctrl or Shift on Windows and use Command or Shift on Mac to select multiple questions. Then change Span from 1 to 3, shown as below.
We could also add multiple questions at once without leaving the Add panel. As shown below, we need to press Shift, and start to click on questions on Add panel, release Shift when done adding questions.
3. Both columns and spans can be set on groups.
Grid layout styles: fixed grid and dynamic grid
Grid layout style controls behavior of questions in groups and pages. The difference between fixed grid and dynamic grid styles is how questions are positioned within the grid. When using the dynamic-grid style, questions and groups may move around on the form in an attempt to make best use of the available screen space. The fixed-grid style is more predictable. A question will appear if its relevant/visibility conditions are met, otherwise a blank space will occupy that part of the form.
Below is an example of using fixed grid layout, there is a placeholder created for question - List defects found and this question won't appear until choice of Fail is selected. No questions will move to fill available space.
Adjust form width to improve your grid layout
Form width can help improve how the web app displays a grid layout and can be set in pixels or as a percentage of screen width. Increase form width to fit more questions in a row.
For example, I have set form width to be 100% below and it enables this form to take full width of my screen space.
Grid layout reset button
This button is used to clear all grid layout setting in web designer and this action cannot be undone. After pressing this button, all questions and groups will take full width of forms.