How to design a responsive web application: Hiding an element of the form

Official Content
This documentation is valid for:

In Responsive Web Applications only the relevant information is shown for mobile applications. This implies that some elements which are present in desktop screens will not be included in phone screens.

Example

Consider the following example where a list of tourist attractions is displayed. In small screens and wider screens (> 768px), each element of the list is displayed with its photo. On the other hand, in extra small screen devices the photo is not shown.

Phone screen sample Desktop screen sample2

How to design it

In this case the list of tourist attractions is loaded in a Free Style Grid that includes a photo of each tourist attraction.

The photo and other elements of the grid (&AttractionName, &AttractionId, and &AttractionDescription variables) are inside a Table control nested into the Free Style Grid.

Since the element that is going to be hidden is not inside a cell of the Responsive Table, but inside a common table, we use Conditional Class Properties for Themes to solve this problem.

To do so:

First, assign a class to the image control:

Hiding an element in responsive table sample

Next, edit the Theme and define a conditional rule. For that conditional rule and the class you've just defined, configure the class property "display = none", as shown below:

Hiding an element in responsive table sample 2

And that's all! The reason is that the conditional class rule will be triggered and its settings will be applied depending on the size of the screen.

See Also

How to use the Abstract Editor: Hiding a cell in the Responsive Table
How to design a Responsive Web Application: Hiding a column in a grid