Responsive Sizes property (X Evolution 3)

Official Content

Responsive Sizes is a property of the Responsive Table control. It is available from the control’s list of properties and in its contextual menu.

This property is meant to allow the arrangement of elements in the form, for four different screen sizes, in order to make a RWD.

When we right-click on the Responsive Table, a contextual menu is displayed showing the Responsive Sizes property:

Responsive Sizes contextual menu

When the user clicks on the Responsive Sizes item in the menu, a new window appears to select the screen size. The user selects the screen size from a combo box and configures the distribution of  elements on the screen, for each size selected:

Responsive Sizes Configuration window

Screen sizes available correspond to different standard screen devices, as listed below (based on BootStrap Framework):

  • Extra small devices (xs)       (Phones < 768px)
  • Small-size devices (sm)              (Tablets >= 768px) 
  • Medium-size devices (md)            (Desktops >= 992px)
  • Large-size devices (lg)               (Desktops >= 1200px)

Properties of cells

Users may set different properties for each cell in the responsive table, and for each screen size.

Responsive Sizes settings

Width

It defines the cell width  as a percentage.
The width is represented in a combo box with percentages. Values available for selection are the ones that match the column distribution of the Bootstrap Grid. So, the percentages may be converted into twelfths.
The aggregate width of cells in a row must be 100% or less. 
Otherwise, cells not fitting in the row will be dropped to the bottom.

Offset

It defines a cell’s left margin as a percentage.
It moves the cell to the right according to the value specified.
As it happens with width values, the offset is represented in a combo box with percentages, and values available for selection are the ones that match the possible offset values of BootStrap Grid.

Visible

It determines whether the cell will be visible or not.

Move

Available as since GeneXus Evolution 3 upgrade 3.

Change the order of the columns. The user can declare an offset for the column, so it displays in a different position depending on the screen size.

i2015_03_27_20_29_481_png

Default property values

Default values are based on the fact that, for small screens -like phone screens-, the best way to show information is in a single column (stacked). On the contrary, for wide screens, like tablet or desktop screens, the information is better displayed horizontally. 

So, default values are:

Extra small devices
(Phone < 768px)             

Width=100%, Offset=0%, Visible= TRUE for all cells.

ExtraSmallDefaults

Small-size devices

(Tablets >= 768px) 

Each cell takes up a width of 100% divided by the number of cells in the row. The width assigned to the cell is from a range of possible values and corresponds to the column distribution of the Bootstrap Grid. The average sum is 100%. Cells that do not fit in the row will be dropped to the bottom.

Offset=0%, Visible= TRUE for all cells.

SmallDefaults

Medium-size devices

 (Desktops >= 992px)

Inherit from small-size device settings.

 

Large-size devices

(Desktops >= 1200px)

Inherit from medium-size device settings.

 

How to identify default settings:

Information in bold letters means that its value is not the default.

Example

In the picture below, the width and offset settings for medium-size devices have been changed for the 1,4 (Four) cell, and that’s why values are in bold letters.

As a consequence, the same settings are used for large-size devices, even though values are not in bold because they are inherited from the prior smaller screen size.

Default Responsive Values

Users may opt for the default values by using the contextual menu and clicking "Use default".

Note that the medium-size screen will inherit from the small-size-screen when the medium-size has not lost the inheritance. The same happens in the case of large-size screens  which inherit from the medium-size screens.

Inherited properties

The settings for screen sizes apply to the specific screen size and larger sizes when no setting  has been specified for larger sizes.

When no settings have been specified for smaller screen sizes, then 100% will be the default value. This is based on BootStrap behavior.

See Also

How to use the Abstract Editor: designing a Web Transaction Form
How to design a Responsive Web Application: Hiding a column in a grid
How to design a responsive web application: Hiding an element of the 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.