ADF

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