Responsive Header Selection - What each option means
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>