The panelFormLayout component can be used to position input components such that their labels and fields line up vertically. Other components can also be placed in the panelFormLayout, but they will not line up perfectly.
As you can see from the above example, the first three rows line up perfectly, but the last two rows line up slightly to the right.
After take a closer look to the rendered page, it turns out ADF generates different style classes for the rows with input components and those with other components. For input components (and panelLabelAndMessage), ADF generates the style class AFPanelFormLayoutContentCell for the table cells containing the input controls, but the style class af_panelFormLayout_content-cell for other components (button, panelGroupLayout, etc.).
The af_panelFormLayout_content-cell (starts with "af_") is the generated style class name of the ADF skin component-specific selector af|panelFormLayout::content-cell (starts with "af|", with a pseudo-element). For some reason (flexible padding perhaps), AFPanelFormLayoutContentCell is used for input components and panelLabelAndMessage instead, with basically the same name but following the convention that is usually used in the naming of global selector aliases and miscellaneous style classes.
Anyway, if needed, we can override the padding-left property of af|panelFormLayout::content-cell to line up components in a way we like. For example:
af|panelFormLayout::content-cell {
padding-left: 4px; /* down from 8px */
}
Environment:
After take a closer look to the rendered page, it turns out ADF generates different style classes for the rows with input components and those with other components. For input components (and panelLabelAndMessage), ADF generates the style class AFPanelFormLayoutContentCell for the table cells containing the input controls, but the style class af_panelFormLayout_content-cell for other components (button, panelGroupLayout, etc.).
The af_panelFormLayout_content-cell (starts with "af_") is the generated style class name of the ADF skin component-specific selector af|panelFormLayout::content-cell (starts with "af|", with a pseudo-element). For some reason (flexible padding perhaps), AFPanelFormLayoutContentCell is used for input components and panelLabelAndMessage instead, with basically the same name but following the convention that is usually used in the naming of global selector aliases and miscellaneous style classes.
Anyway, if needed, we can override the padding-left property of af|panelFormLayout::content-cell to line up components in a way we like. For example:
af|panelFormLayout::content-cell {
padding-left: 4px; /* down from 8px */
}
Note that, the content-cell pseudo-element of the af|panelFormLayout selector will not show up in the selector window of your ADF skin editor:
You need add it manually.
Environment:
- Mac OS X 10.9.5
- Google Chrome 37.0.2062.124
- JDeveloper 12.1.3.0.0
- Compression for CSS Class Names
- http://docs.oracle.com/middleware/1213/adf/tag-reference-faces/tagdoc/af_panelFormLayout.html
Sample application:
No comments:
Post a Comment