Stretch ADF Faces Components to fit browser width (Show as row-column layout- inline block )

Recently i have seen a thread in OTN about layout of components (How to use components to show a particular layout)
ADF layout for showing email recipients

Requirement was simple, user want to show components up to maximum available width (browser window width) first and then move to next line and show other components
So i thought to document it here :)

Suppose i have to show 6 images on page (horizontally) , so for that i have used 6 group layout
one for each image and button



See xml source-

<af:panelGroupLayout id="pgl1" layout="horizontal">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

 and how it looks on page-

You can see here last image is not appearing properly because total width of all images has crossed maximum available width of browser window
Now i want to show last image on next line
So to do this set parent panel group layout to default layout and set display:inline-block for all child panel group layout

<af:panelGroupLayout id="pgl1">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

Now it appears like this -

now again test it by increasing and decreasing browser window width , images and group layout are adjusted as per screen size automatically like a grid view (row and columns)

Thanks , Happy Learning :)
Sample ADF Application- Download