Tuesday, May 17, 2011

ADF Faces Layout Tips: Stretching an af:region inside af:dialog/popup component

The original solution to this post has been deprecated. Please see at bottom the proper solution.

I have a hard time stretching the height of an af:region inside a pop-up dialog, so to make the life of others easy, below is a sample to show what I have figured out.

<af:popup id="p1">
          <af:dialog id="d2" type="ok" resize="on" contentWidth="600"
                     contentHeight="400">
            <af:panelStretchLayout id="psl1"
                                   inlineStyle="height:inherit;"
                                   styleClass="AFStretchWidth">
              <f:facet name="center">
                <af:region value="#{bindings.sampletaskflow1.regionModel}"
                           id="r1"/>
              </f:facet>
            </af:panelStretchLayout>
          </af:dialog>
        </af:popup>
The trick is setting the 'inlineStyle' of the surrounding panelStretchLayout to 'height:inherit;'.

Cheers,
pino

Important update to this post:

To stretch a component inside a pop-up dialog you just need to set the ADF dialog's "stretchChildren" property to "first" as described by the following example:
  <af:popup id="p2">
      <af:dialog id="d3" type="ok"
                 resize="on" contentWidth="800" contentHeight="500"
                 stretchChildren="first">
           <af:region value="#{bindings.sampletaskflow1.regionModel}"
                      id="r3"/>
      </af:dialog>
  </af:popup>