Responsive Design

Dashboards designed for Web UI can dynamically adapt to different screen resolutions and sizes of browser window. This approach is widely known as responsive web design.

Here is how the process of creating responsive interfaces looks:

  • Web UI Builder's toolbar contains Resolution Selector combo box that switches editing mode between different expected widths of the browser window

  • Once a specific window width is chosen, any changes made to a grid layout will be associated with the selected width

  • Those grid constraint changes are reflected in corresponding lines of Breakpoint table that belongs to the container whose grid is being edited (for example, if selected width is Tablet 800px all grid changes will be saved in lines with Responsive parameter equals to 800).

Once a responsive dashboard is being rendered at runtime, Web UI rebuilds its layout every time when browser window width is changed.

For every component in a container with a grid layout, a line of Resolution Properties table is selected by the most relevant width (pointed by Responsive parameter). Grid constraints (X, Y, width, height) specified in this line are used to render the component in the container's grid.

The default row of the Resolution Properties table specifies a “None” width, which means that there are no specific screen resolutions targeted. In other words, any styles or markup that are written while the "None" option is selected will apply to all screen resolutions and devices, regardless of their size or other properties.

Was this page helpful?