One of the most popular responsive design pattern is the header selection. In this article we present the various settings for the headers and what they mean.
- Persist: This setting means that the corresponding column should always appear, regardless of the screen resolution, therefore the header does not appear in the header selection box.
- Essential: This setting means that the header should appear selected in smaller and larger screen resolutions (smart phones, tables).
- Optional: This setting means that the header should appear selected only in larger screen resolutions (tablets).
- Invisible: This setting means that the header should be initially hidden regardless of the screen resolution.
- None: This setting means that the header should appear only in desktop-sized screen resolutions.
|Header 1||Header 2||Header 3||Header 4||Header 5|
Try to resize slowly the browser in a desktop PC to see how the headers getting selected/unselected and the corresponding columns appear/disappear.
For instance, if I want to make the 10th header essential, I would modify the priorities value as follows:
<rule element="table" range="all" responsive="3:priorities2:persist,3:essential,4:optional,5:optional,10:essential" ></rule>