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>


4 comments:

  1. I think this should work even you remove the panelStretchLayout from popup. and your TF which is dropped as a region is stretchable layout at the root.

    ReplyDelete
  2. Hi Vik,

    It is not working, that is why I posted this blog.
    In my app, the root is a panelStretchLayout and yet the height is not stretching when put as a region in a popup. I can upload the sample tomorrow and update this blog.

    You can try it for yourself, and let me know.

    Pino

    ReplyDelete
  3. Please see the important update to this post above.

    regards,
    Pino

    ReplyDelete