Small updates always matter - there is one such update in ADF PS3. We have new property to control UI layout components stretching, this property is called DimensionFrom. This post will demonstrate how and where DimensionFrom property can be applied.
Download sample application - LayoutStretching.zip. This sample implements very typical use case in ADF - regions included into Panel Tabbed component. It contains two regions, one is nested into another:
Region with data is included into region with tabs:
Data region contain ADF Rich Faces UI layout component - Panel Tabbed, it groups two UI boxes:
Tabs region contains nested region with data, I just did drag and drop. However by default, included region with data is rendered as corrupted, only half of region is visible:
Same on runtime, region is squeezed:
What happens - Panel Dashboard is not stretched correctly, when it is rendered from included region. We were solving this before by setting AFVisualRoot style, but its bad practice (is not guaranteed to work on all browsers). I recommend to avoid using AFVisualRoot style for stretching:
Useful hint - if you want to see all available styles, just click Edit option for style class property:
Instead of using AFVisualRoot, scroll down in Property Inspector and select DimensionsFrom property. By default its value is set to parent:
Switch DimensionFrom value to auto:
Magic happens - embedded region is stretched on design time:
On runtime is stretched as well:
Download sample application - LayoutStretching.zip. This sample implements very typical use case in ADF - regions included into Panel Tabbed component. It contains two regions, one is nested into another:
Region with data is included into region with tabs:
Data region contain ADF Rich Faces UI layout component - Panel Tabbed, it groups two UI boxes:
Tabs region contains nested region with data, I just did drag and drop. However by default, included region with data is rendered as corrupted, only half of region is visible:
Same on runtime, region is squeezed:
What happens - Panel Dashboard is not stretched correctly, when it is rendered from included region. We were solving this before by setting AFVisualRoot style, but its bad practice (is not guaranteed to work on all browsers). I recommend to avoid using AFVisualRoot style for stretching:
Useful hint - if you want to see all available styles, just click Edit option for style class property:
Instead of using AFVisualRoot, scroll down in Property Inspector and select DimensionsFrom property. By default its value is set to parent:
Switch DimensionFrom value to auto:
Magic happens - embedded region is stretched on design time:
On runtime is stretched as well:
"Useful hint - if you want to see all available styles, just click Edit option for style class property:"
ReplyDeleteI'm using 11.1.1.4 (PS3) and there is no Edit option when I click on the Style class. Just Expression Builder and reset to default. What am I missing?
Hi,
ReplyDeleteIf StyleClass property is empty - indeed there is no Edit option available. But if you type something, for example "AFVisualRoot" - then Edit option appears.
Regards,
Andrejus
Hi,
ReplyDeleteThanks for the Useful post..
Is there any property to Stretch pop up window automatically??
Thanks in advance.
I dont think so, unless you put strechable component (panelTabbed for example) into popup and set strechChildren = First. Another option, you can put af:panelStretchLayout into popup, this usually helps to stretch it.
ReplyDeleteAndrejus
I have a panelTabbed and in that I have two showDetailItem.
ReplyDeleteI want to dynamically reset the height, as of now when I am giving a constant height at inlinestyle for panelTabbed, both the showDetailItem is taking that height and due to this one of the tab is showing so much whitespace and the other is fine.
I want to achieve a dynamic height reset so that both the tabs shrink n expand as per the content.
How can I achieve this.