Responsive Containers
The Responsive design mode provides three containers: a responsive Table, a responsive Panel, and a responsive Repeating Table.
The responsive Repeating Table’s behavior is slightly different from the fixed-width mode. The cells of the Repeating Table behave in a more fluid manner, allowing support for multiple device types while still maintaining the structure.
The cells inside the repeating table will grow and shrink based on the size of the end user’s display. The proportions of the cells in each table can be adjusted with the mouse. By setting the minimum width view property, you can prevent responsive repeating tables from becoming too narrow.
The other two responsive containers (responsive Table and responsive Panel) behave differently from their fixed width counterparts. The size of the cell is not set with pixel values, rather the cells are assigned values that determine what their relative size will be at various screen sizes. The UI Designer uses a fractional system for the cells in so-called units:
In a row of the table or panel, up to 12 units can fit, so each value assigned to a cell can be thought of as a fraction of 12. In the instance below, three columns were created to span the length of the form. Therefore, each cell is 4 units wide.
If the values of the cells in a row exceed 12, the row will wrap beneath itself, as if a new row was created. In this example, the middle cell spans 5 units. Therefore, the sum of all cells now exceeds 12 units, and the form has pushed the last cell into a new row:
Responsive Table Operations
When you select a cell in responsive mode, options for width in the table style menu are replaced with three inputs, to set this value for the three device types that UI Designer supports (Desktop, Tablet, and Mobile). You can select multiple cells at the same time to set all their values at once, just like in fixed width mode.
(!!) Note: There are no handles to drag the cells for resizing. Responsive Table cells must be resized through the Size options in the properties panel.
Using different values for different screen sizes, different layouts can be generated that allow form content to adapt to multiple screen sizes. A desktop, tablet, and mobile device configuration might use a pattern similar to this one, because desktops have more horizontal space, while vertical design is preferred for mobile devices.
The three different layout classes are:
Class | Description | Example |
Desktop | If the window is at least 1200 pixels wide, your form displays in the Desktop layout. You may have a table with one row and six cells as shown below. In order for these cells to span the width of the desktop screen in a single row, each cell is set to be 2 units wide. | The form, modified for a desktop, will look like the one below:
|
Tablet | If your window is less than 1200 pixels wide and greater than 768 pixels wide, it displays in the tablet layout automatically. In order to continue fitting the entire form on one screen without compromising visibility of the fields, it’s best practice to resize it. For this tablet layout, you would recreate the same table above in two rows instead of one. In this setup each cell is now set to 4 units wide. | The form, modified for a tablet-sized screen, will look like the one below:
|
Mobile | If your window is less than 768 pixels wide, your form displays in the mobile layout automatically. Similar to the tablet view, you will need to resize the form. For this mobile layout, you would recreate the same table in six rows. Therefore, each cell is now set to 12 units wide.
| The form, now modified for a phone-sized screen, will look like the one below:
|
Aligning Items at All Screen Sizes
Sometimes, it is necessary to have two controls always horizontally aligned, such as a checkbox and its label. By nesting responsive tables/panels within responsive tables/panels, you can ensure this behavior.
Here is an example form where the horizontal alignment property of the cells has been used to position the checkboxes and labels. However, the table has not yet been configured for responsive widths. Rationally, the checkbox and labels should not share the same widths.
Here, the inner tables have columns of 1 and 11 units at every screen size. Responsive tables behave the same way when nested in a cell as they do outside of one; exceeding 12 units in a row will cause a nested table to wrap as well.
However, the outer table’s cells vary in width depending on the layout type. Each cell in the outer table has a size of 4 units on desktops, 6 units on tablets, and 12 units on mobile devices.
This yields the following views:
View | Example |
Desktop |
|
Tablet |
|
Mobile |
|
