ADF UI - Tips to stretch different ADF components to occupy the entire page width

Here are the simple techniques to stretch different ADF components to occupy the entire page width.

1. Stretching af:table inside af:panelCollection:
Just specify styleClass="AFStretchWidth" for af:panelCollection. You don't need to specify either 'width', 'style' or 'styleClass' for the af:table which is inside af:panelCollection.

Table before Stretching:

Table after Stretching:

2. Stretching af:panelTabbed and af:panelSplitter:
Just surround the component with af:panelStretchLayout and place the component in it's 'center' facet and specify styleClass="AFStretchWidth" for the af:panelStretchLayout. That's it. You don't need to set either 'style' or 'styleClass' properties for af:panelTabbed or af:panelSplitter.

af:panelTabbed before Stretching:

af:panelTabbed after Stretching:

To stretch any other component, specifying the property styleClass="AFStretchWidth" should stretch the width of the component to occupy entire page. But, incase if it doesn't work try surrounding the component with af:panelStretchLayout and place the component in it's 'center' facet. Even if it doesn't work, try specifying styleClass="AFStretchWidth" for af:panelStretchLayout. One of these should definitely work :)

PS: This will just stretch the width, if you want to increase the height for the component you need specify for height for the component in the 'Style' section by specifying 'inlineStyle' property if it doesn't have 'height' property already.