How to design a Responsive Web Application: Hiding a column in a grid

Official Content
This documentation is valid for:

In a Responsive Web Application only the relevant information is shown for mobile applications; this implies that some elements which are displayed on desktop screens, are not displayed on phone screens.
As for grids, in general they show more columns for wide screens than for extra small screens.

This is the case of the Work With Pattern for web, whose default form generates the Abstract layout shown below - when the Web Form Defaults property is set to Responsive Web Design.

Work With Attractions Abstract Layout

At runtime...

  • Note that for extra small screen sizes the grid only shows three columns:

Work With Default Grid extra small screen

  • In small and wider screens, the grid displays all columns:

Work With Default Grid desktop screen

How it is designed

The user can decide, at design time, which columns will be visible and which won't.

In the example, select one grid column which is hidden at runtime for the extra small screen size and note that the WWOptionalColumn class is assigned to the Column Class Property.

Column Class of a grid

The WWOptionalColumn class belongs to the "Flat" Theme, and has property values which depend on a conditional rule called "ExtraSmall". See Conditional Class Properties for Themes for more information about this topic.

Conditional Class for grid columns

Note that the display property value for the WWOptionalColumn class is none, when the "ExtraSmall" rule evaluates to TRUE. The conditional rule is translated into a media query, which is transparent to the user, and this is what makes it possible to obtain the desired behavior and hide some of the grid columns.

See Also

How to design a responsive web application: Hiding an element of the form
How to use the Abstract Editor: designing a Web Transaction Form
How to use the Abstract Editor: Hiding a cell in the Responsive Table
Arranging the layout in a RWA

 





Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.