Layout: stretching the width and scrolling vertically

The purpose of this post is to layout a page with ADF where there are vertically stacked tables that stretch to the width of the page, but have a constant height with a vertical scroll bar.  Here is an example:

Note the two tables that each have one column (col1). The height of the tables does not stretch with the height of the overall page. A scrollbar is there instead.  However, the width of the tables stretches with the width of the page. 

One way to do this is to put the tables inside a PanelGroupLayout component with layout="scroll". Then set the styleClass of the tables to "AFStretchWidth". That's it--save and run.

The page above actually has a splitter with the tables inside the first and second facets of the splitter. If you add a splitter the styleClass of the splitter should be set to "AFStretchWidth". The tables do not need to have their styleClass set.

Here is a sample of the relevant part of the code:

            <af:panelGroupLayout id="pgl1" layout="scroll">
              <af:panelSplitter id="ps1" orientation="vertical"
                                styleClass="AFStretchWidth">
                <f:facet name="first">
                  <af:table var="row" rowBandingInterval="0" id="t1">
                    <af:column sortable="false" headerText="col1" id="c1">
                      <af:outputText value="#{row.col1}" id="ot1"/>
                    </af:column>
                  </af:table>
                </f:facet>
                <f:facet name="second">
                  <af:table var="row" rowBandingInterval="0" id="t2">
                    <af:column sortable="false" headerText="col1" id="c15">
                      <af:outputText value="#{row.col1}" id="ot4"/>
                    </af:column>
                  </af:table>
                </f:facet>
              </af:panelSplitter>
            </af:panelGroupLayout>