Stretch in multiple components using af:popup, af:region, af:panelTabbed
- by Arvinder Singh
Case study: I have a pop-up(dialogue) that contains a region(separate taskflow) showing a tab. The contents of this tab is in a region having a separate taskflow. The jsff page of this taskflow contains a panelSplitter which in turn contains a table.
In short the components are : pop-up(dialogue) --> region(separate taskflow) --> tab --> region(separate taskflow) --> panelSplitter --> table
At times the tab is not displayed with 100% width or the table in panelSplitter is not 100% visible or the splitter is not visible.
Maintaining the stretch for all the components is difficult......not any more!!! Below is the solution that you can make use of in many similar scenarios.
I am mentioning the major code snippets affecting the stretch and alignment.
pop-up:
<af:popup>
<af:dialog id="d2" type="none" title="" inlineStyle="width:1200px">
<af:region value="#{bindings.PriceChangePopupFlow1.regionModel}" id="r1"/>
</af:dialog>
The above region is a jsff containing multiple tabs. I am showing code for a single tab.
I kept the tab in a panelStretchLayout.
<af:panelStretchLayout id="psl1" topHeight="300px" styleClass="AFStretchWidth">
<af:panelTabbed id="pt1">
<af:showDetailItem text="PO Details" id="sdi1" stretchChildren="first" >
<af:region value="#{bindings.PriceChangePurchaseOrderFlow1.regionModel}" id="r1" binding="# {pageFlowScope.priceChangePopupBean.poDetailsRegion}" />
This "region" displays a .jsff containing a table in a panelSplitter.
<af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="700">
<f:facet name="first">
<af:panelHeader text="PurchaseOrder" id="ph1">
<af:table id="md1" rows="#{bindings.PurchaseOrderVO.rangeSize}"
That's it!!! We're done...
Note the stretchChildren="first" attribute in the af:showDetailItem. That does the trick for us.
Oracle docs say the following about stretchChildren :
Valid Values: none, first
The stretching behavior for children. Acceptable values include:
"none": does not attempt to stretch any children (the default value and the value you need to use if you have more than a single child; also the value you need to use if the child does not support being stretched)
"first": stretches the first child (not to be used if you have multiple children as such usage will produce unreliable results; also not to be used if the child does not support being stretched)
