[ADF-11.1.2] Setting Table "columnStretching" brings dummy scroll bar

Question

I am facing a problem where in whenever I set "columnStretching" property of af:table component (which is inside panel collection), a dummy and ugly horizontal scroll bar appears on browser.
I am facing this issue at least with Google Chrome and Firefox.
Screenshot: [3 Screen shots uploaded|http://imageshack.us/g/651/withoutcolumnstretching.jpg/]
Is this an issue with ADF or in the way I am using it ?
Step to reproduce the issue:
1. DnD Panel Collection inside Panel Splitter
2. DnD Table insider Panel Collection OUTPUT : At this point everything is OK- SCREENSHOT1
3. Set columnStretching property of table to any valid value.
4. Run the page, at first, you may not find anything weird, OUTPUT: SCREENSHOT2
5. On browser, move the splitter to change the visual hight/width of table, you will notice a horizontal bar - SCREENSHOT3
Now, no matter what you do, you won't be able to come out of horizontal bar.
              <af:panelSplitter id="ps1" orientation="vertical">
                <f:facet name="first">
                  <af:panelCollection id="pc1">
                    <f:facet name="menus"/>
                    <f:facet name="toolbar"/>
                    <f:facet name="statusbar"/>
                    <af:table value="#{bindings.DepartmentsView1.collectionModel}"
                              var="row"
                              rows="#{bindings.DepartmentsView1.rangeSize}"
                              emptyText="#{bindings.DepartmentsView1.viewable ? 'No data to display.' : 'Access Denied.'}"
                              fetchSize="#{bindings.DepartmentsView1.rangeSize}"
                              rowBandingInterval="0"
                              selectedRowKeys="#{bindings.DepartmentsView1.collectionModel.selectedRow}"
                              selectionListener="#{bindings.DepartmentsView1.collectionModel.makeCurrent}"
                              rowSelection="single" id="t1"
                              columnStretching="column:c2">
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentId.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.DepartmentId.label}"
                                 id="c1">
                        <af:outputText value="#{row.DepartmentId}" id="ot1">
                          <af:convertNumber groupingUsed="false"
                                            pattern="#{bindings.DepartmentsView1.hints.DepartmentId.format}"/>
                        </af:outputText>
                      </af:column>
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentName.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.DepartmentName.label}"
                                 id="c2">
                        <af:outputText value="#{row.DepartmentName}" id="ot2"/>
                      </af:column>
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.ManagerId.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.ManagerId.label}"
                                 id="c3">
                        <af:outputText value="#{row.ManagerId}" id="ot3">
                          <af:convertNumber groupingUsed="false"
                                            pattern="#{bindings.DepartmentsView1.hints.ManagerId.format}"/>
                        </af:outputText>
                      </af:column>
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.LocationId.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.LocationId.label}"
                                 id="c4">
                        <af:selectOneChoice value="#{row.bindings.LocationId.inputValue}"
                                            label="#{row.bindings.LocationId.label}"
                                            required="#{bindings.DepartmentsView1.hints.LocationId.mandatory}"
                                            shortDesc="#{bindings.DepartmentsView1.hints.LocationId.tooltip}"
                                            readOnly="true" id="soc1">
                          <f:selectItems value="#{row.bindings.LocationId.items}"
                                         id="si1"/>
                        </af:selectOneChoice>
                      </af:column>
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.StreetAddress.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.StreetAddress.label}"
                                 id="c5">
                        <af:outputText value="#{row.StreetAddress}" id="ot4"/>
                      </af:column>
                      <af:column sortProperty="#{bindings.DepartmentsView1.hints.LocationId1.name}"
                                 sortable="false"
                                 headerText="#{bindings.DepartmentsView1.hints.LocationId1.label}"
                                 id="c6">
                        <af:outputText value="#{row.LocationId1}" id="ot5">
                          <af:convertNumber groupingUsed="false"
                                            pattern="#{bindings.DepartmentsView1.hints.LocationId1.format}"/>
                        </af:outputText>
                      </af:column>
                    </af:table>
                  </af:panelCollection>
                </f:facet>
                <f:facet name="second">
                  <af:panelBorderLayout id="pbl2">
                    <f:facet name="start"/>
                    <f:facet name="bottom"/>
                    <f:facet name="end"/>
                    <f:facet name="top"/>
                  </af:panelBorderLayout>
                </f:facet>
              </af:panelSplitter>
        Edited by: Anandsagar Sah on Aug 2, 2011 11:22 AM

Answer 1

Looks wired, but not sure if it's a bug.
The problem is the panel collection. Looks like the size is off a pixel after moving the splitter this triggers the stretch to recalc and as it somehow decides that is does not fit horizontal it shows the scroll bar.
You can get rid of the horizontal scroll bar in a couple of ways :
1. if you hide a column
2. if you show a hidden column
3. if you reorder the columns
4. if you trigger a ppr on the panel collection (I prefer this) e.g. put a button on the toolbar
5. refresh the whole page.
All solutions are based on the fact that the panelCollection recalculates it size during a ppr.
Timo