Requirement:We often come across requirement where we don't want any horizontal or vertical scrollbar for af:table/ADF table
Solution:
I am using HR DB schema department table and have created view object and Entity Object based on department table .My UI code looks like below when i dragged view object on page as table.Note I have changed columnStretching="last" and autoHeightRows="20"
 |
when i run page it looks like this with Horizontal and Vertical scrollbar and there is space empty on right of the table.
Now lets get rid of Vertical Scrollbar first which very simple .We need to use scrollPolicy="page" attribute on af:table and table looks like below. Other way is to increase value for autoHeightRows="20" which result in longer table vertically .for now i have added scrollPolicy="page" which is needed in most cases.
Now interesting part is horizontal scrollbar is still there and there is no need for it.To get rid of horizontal scrollbar we need to add styleClass="AFStretchWidth" on af:table. After that now table looks like below.
- In above screenshot both horizontal and vertical scrollbar are gone but table occupies full page width.We may not want to table to occupy full page width .In this case give width="50%" on af:table and table looks like below.
- Please note here i have given width in percentage if you give something like width="500" then horizontal scrollbar will still appear.
- Please note you can not give width too small in percentage that it can't cover the columns table ,which will ultimately result in horizontal scrollbar.
If your table is having more columns then tune the width % up-to 100.
Final af:table code looks like below
