Hiding Columns in a Flex Grid Using Style

You can style an entire column in a flex grid by using the page field name of the field (or group box) within a grid. The page field name will be applied directly to the column (both the table header [TH tag] and the cells [TD tag]) as a style. At that point, you can affect styling an entire column (centering, font weight, and so on).

You can hide an entire column stylistically, using the page field name (as opposed to hiding the column using PeopleCode, which can prohibit complete rendering of the column).

If you are hiding a column using style, you must consider the following items.

Consideration Description

Consideration	Description
Accessibility	If you stylistically hide the trigger column used for the row action, you must make sure that you expose the trigger column in screen reader mode. This is because in screen reader mode, the row action is disabled and the column used as the trigger field now becomes actionable and can receive focus. In screen reader mode, the row action trigger should have the following characteristics: It must be visible. It must have text (alt text or image) that explains the action. For example, if you have a field on a grid that has a page field name of “ABC_XYZ”, the style applied on all references to that column is “ABC_XYZ” (TD and TH tags in the table). To properly hide the entire column, use the following: `:root:not(.psc_mode-access) .ABC_XYZ { display:none; }`
Grid Header Alignment	If you stylistically hide a column, do not stylistically hide the last column in a grid. Doing so can adversely affect grid header layout. PeopleTools uses the last column of the grid to adjust the grid header if it needs to have an overhang for the scroll bar, enabling the grid scroll bar to appear as part of the grid. If you hide the last column, the overhang is assigned to the last column and if it is hidden, the overhang can be lost, resulting in a misaligned grid header.

Accessibility

If you stylistically hide the trigger column used for the row action, you must make sure that you expose the trigger column in screen reader mode.

This is because in screen reader mode, the row action is disabled and the column used as the trigger field now becomes actionable and can receive focus. In screen reader mode, the row action trigger should have the following characteristics:

It must be visible.
It must have text (alt text or image) that explains the action.

For example, if you have a field on a grid that has a page field name of “ABC_XYZ”, the style applied on all references to that column is “ABC_XYZ” (TD and TH tags in the table). To properly hide the entire column, use the following:

:root:not(.psc_mode-access) .ABC_XYZ { display:none; }

Grid Header Alignment

If you stylistically hide a column, do not stylistically hide the last column in a grid. Doing so can adversely affect grid header layout.

PeopleTools uses the last column of the grid to adjust the grid header if it needs to have an overhang for the scroll bar, enabling the grid scroll bar to appear as part of the grid. If you hide the last column, the overhang is assigned to the last column and if it is hidden, the overhang can be lost, resulting in a misaligned grid header.