ADF how to stretch table vertically and horizontally?

How to stretch ADF table vertically to fill maximum available vertical space in browser?

Answer:
  • Put table into af:panelStretchLayout component center facet.
  • Put dimensionsFrom="parent" attribute into af:panelStretchLayout (parent of af:panelStretchLayout component must stretch its children)

How to stretch ADF table horizontally to fill maximum available horizontal space in browser?

Answer:
  • Put table into af:panelStretchLayout component center facet.
  • Add styleClass="AFStretchWidth" attribute to af:panelStretchLayout
 
Example:
 
<af:panelStretchLayout id="psl1"  styleClass="AFStretchWidth" dimensionsFrom="parent">
    <f:facet name="center">
        <af:table value="#{bindings.EmployeesView11.collectionModel}"
                      var="row" rows="#{bindings.EmployeesView11.rangeSize}"
                      emptyText="empty"
                      fetchSize="#{bindings.EmployeesView11.rangeSize}"
                      rowBandingInterval="0" id="t1">
              

<af:column sortProperty="#{bindings.EmployeesView11.hints.FirstName.name}"
                         sortable="false"
                         headerText="#{bindings.EmployeesView11.hints.FirstName.label}"
                         id="c2">

.....
.....
.....
 </table>
</f:facet>
</af:panelStretchLayout>

Sample can be downloaded here
If stretching issues in ADF 12.2.1 this post might help: ADF application layout messed up after migration to 12.2.1 ... What might be the reason ?

Version 12.1.3.0

3 comments:

  1. the height example .... not working ...and there is red color on the height "inline Style"

    ReplyDelete
  2. the height example .... not working ...and there is red color on the height "inline Style"

    ReplyDelete
  3. Thank You Tokando for a feedback! Indeed I've tested it once again in ADF 12c and it does not work.. Thus made a small revision and put sample application for download. I'd propose to implement it by adding dimensionsFrom="parent" attribute to panelStretchLayout. Although in this case parent component must stretch its children.

    ReplyDelete