The
af:document tag is required for all pages that use ADF Faces components. All components that make up the page contents should then be inserted within
af:form. In most cases you would want stretched contents in a page, so you would start with one root component that can both be stretched by
af:document and can stretch it child components. The root component contains all other child components that make up the layout and contents of the page.

By default in JDeveloper, the
maximized attribute on
af:document is set to
true for a root component to stretch and use the entire visible portion of the browser (provided the root component used can be stretched). Examples of layout components you can use as a root component for stretched page contents include Panel Stretch Layout, Panel Splitter, and Decorative Box. At runtime, because there is a single root component that can both be stretched and stretch its children, the page contents will stretch to fit the browser window. When users resize the window, the page contents are resized to fit within the available browser space.

Most other layout components, such as Panel Group Layout, Panel Form Layout and Panel Border Layout, cannot stretch their child components. A few other layout components, such as Panel Accordion and Panel Tabbed, can stretch their children only if certain conditions are met.

While Panel Stretch Layout, Panel Splitter, and Decorative Box can stretch their child components (such as tables, other layout components, and regions), not all layout components can be stretched. The following layout components can be stretched by a parent stretching component:

Decorative Box

Panel Accordion

Panel Box when
type="stretch" or
type="default"

Panel Collection

Panel Dashboard

Panel Group Layout when
layout="scroll" or
layout="vertical"

Panel Splitter

Panel Stretch Layout

Panel Tabbed

Note: You
do not have to set the width or height value on the
inlineStyle attribute of components to get stretching; doing so will cause inconsistent page display across different web browsers.

The following layout components cannot be stretched by a parent stretching component:

Panel Border Layout

Panel Box when
type="flow"

Panel Form Layout

Panel Group Layout when
layout="default" or
layout="horizontal"

Panel Header

Panel Label and Message

Panel List

If you need to use a non-stretchable layout component inside a stretching component, you must first wrap the non-stretchable component in a transition component, which is a component that does not stretch its children, but itself can be stretched (for example, Panel Group Layout where
layout="scroll" or
layout="vertical").

In summary, to achieve a desired layout that displays page contents consistently across browsers, Oracle recommends that you start with a root component and build a stretchable structure using a combination of components that support being stretched and that stretch their child components. Within this stretchable structure, build your page contents by inserting components that can be stretched (for example, a table or a layout component that can be stretched), or inserting Panel Group Layout with
layout="scroll" or
layout="vertical" to create areas of flowing components that are not stretched. At runtime, the single maximized root component inside
af:document will stretch or resize along with the browser window. The contents inside the root component will stretch or resize accordingly down the hierarchy of components in the stretchable structure until transition components are reached. At that point, normal browser flow and layout takes over, and contents inside the transition components will flow instead of being automatically stretched by the parent stretching components. This process of creating a layout ensures that you always achieve stretched contents and flowing contents where needed.

Note: Oracle does not recommend using nested layers of Panel Group Layout with
layout="scroll", as this causes the user to see and use multiple scroll bars.