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>

Layout Tips: ADF Faces RC - Panel Stretch Layout Component

There is a not so obvious setting for the width and height attributes of the facets of the Panel Stretch Layout Component and that is setting the values as "auto". It applies to the following attributes:

• startWidth
• endWidth
• topHeight
• bottomHeight

This is necessary especially if the component that you put in your top facet is expandable, a Query component for example. You would not most likely like to have scroll bars in your top facet, do you?
Below is a screen-shot image from JDeveloper with the property inspector of the panel stretch layout.

<af:panelStretchLayout id="psl1" topHeight="auto">

But please note of the following description of the topHeight attribute from the <af:panelStretchLayout> documentation:

the height of the top facet specified as a CSS length or auto such that this facet will no longer be stretched and instead will consume the initial offsetHeight given to its children by the browser. It is important to note that in an average page, a switch to a layout using automatic heights exhibited a 10 percent degradation in initial layout speed in Internet Explorer and a 5 percent degradation in Firefox. Results will vary but it is recommended that you use this sparingly in order to optimize your page. Also an automatic height will cause the facet child to not be stretched both vertically and horizontally. If necessary, you can make that automatic height child stretch horizontally by specifying a 100% width in the inlineStyle of that child. Note that many components such as the panelGroupLayout with layout set to scroll or vertical will have their own built-in stretched widths by default.