<af:panelAccordion>

Disabled showDetailItem Children

Item Flexibility

• If a showDetailItem has a non-zero flex attribute value assigned to it and if it has only one child, that child will be stretched (regardless of discloseMany setting)
• The contents of a showDetailItem in a panelAccordion will not be stretched if the flex attribute for that showDetailItem is set to zero
• If every disclosed showDetailItem has a flex attribute value of zero, the last item (the one furthest down) will be stretched as if it had a flex value of 1 (however, if there is more than one child in that showDetailItem, the children will not be stretched)

Printable Pages

Geometry Management

• This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout if the dimensionsFrom attribute of this panelAccordion is set to "parent".
• This component uses <af:showDetailItem> to organize content into each accordion panel. The <af:showDetailItem> will allow stretching if:
  • The panelAccordion has dimensionsFrom="parent"
  • It contains a single child
  • It has stretchChildren="first" specified
  • The child has no width, height, margin, border, and padding
  • The child must be capable of being stretched
  Examples of components that can be stretched inside of a <af:showDetailItem> include:
  • <af:decorativeBox>
  • <af:panelAccordion>
  • <af:panelBox>
  • <af:panelCollection>
  • <af:panelGroupLayout layout="scroll">
  • <af:panelGroupLayout layout="vertical">
  • <af:panelHeader>
  • <af:panelSplitter>
  • <af:panelStretchLayout>
  • <af:panelTabbed>
  • <af:region>
  • <af:table>
  • <af:tree>
  • <af:treeTable>
  If you try to put a component inside of this component and that child component does not support being stretched, then the component hierarchy is illegal. To make it legal, you need to insert another intermediate component between this component and the child component. This intermediate component must support being stretched and must not stretch its children. An example of such a component that is commonly used for this purpose is <af:panelGroupLayout layout="scroll">. By using a wrapper like this, you create a flowing layout area where nothing will be stretched inside of it. Examples of components that do not support being stretched inside of these panelStretchLayout facets (and therefore need to be wrapped) include:
  • <af:panelBorderLayout>
  • <af:panelFormLayout>
  • <af:panelGroupLayout layout="default">
  • <af:panelGroupLayout layout="horizontal">
  • <af:panelLabelAndMessage>
  • <af:panelList>
  • <trh:tableLayout>

• You can specify dimensionsFrom="children" for the panelAccordion to be as tall as the currently-disclosed af:showDetailItem children. When using this "children" setting, the stretchChildren, flex, and inflexibleHeight attributes on af:showDetailItem and any height assignment (e.g. inlineStyle or styleClass) on the panelAccordion must be omitted or else there would be a competing assignment for how tall the component will be.
• You can also specify dimensionsFrom="parent" to make the panelAccordion get its dimensions from the inlineStyle and if not provided from there then from its parent component or if not provided from the parent then from the skin (stretchChildren, flex, inflexibleHeight on af:showDetailItem will be honored).
• Using dimensionsFrom="auto" will choose either "children" or "parent" depending on whether the panelAccordion is being stretched by its parent.

Screen Shot(s)

A panelAccordion component with 4 showDetailItem children.

Code Example(s)

The following is an example of panelAccordion.

<af:panelAccordion id="pa1">
  <af:showDetailItem text="ADF Faces Components" id="sdi1">
    <af:panelHeader text="ADF Faces Components First Child" id="ph1"/>
    <af:panelHeader text="ADF Faces Components Second Child" id="ph2"/>
  </af:showDetailItem>
  <af:showDetailItem text="Architecture" disabled="true" id="sdi2">
    <af:panelHeader text="Architecture First Child" id="ph3"/>
    <af:panelHeader text="Architecture Second Child" id="ph4"/>
  </af:showDetailItem>
  <af:showDetailItem text="Release" id="sdi3">
    <af:panelHeader text="Release First Child" id="ph5"/>
    <af:panelHeader text="Release Second Child" id="ph6"/>
  </af:showDetailItem>
</af:panelAccordion>