function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How to fix size of Output Panel or Pageblock table?


I am trying to get some data from a list to Page block table in VF page.

I have used an OUTPUT PANEL outside and in that I have kept PageBlock Table.

As the record keep on varying the size of Pageblock table varies. I want the size to remain static. If the no. of  records increase then scrollbars should come instead of increased size of pageblock table. (Lets say it should display 10 records only. If more than 10 records are there then scroll bars should come)

I tried keeping Output Panel layout as 'block' and assigning fixed height to it but it does not work exactly when there are many records.

Can anyone provide insight whether how to get the size of Pageblock table or output panel to remain same despite varying no. of records??

Or in any other way this can be done?

Best Answer chosen by Admin (Salesforce Developers) 

Try adding following styles to your outputPanel.


<apex:outputpanel style="overflow:scroll;height:250px;" layout="block">

All Answers


Try adding following styles to your outputPanel.


<apex:outputpanel style="overflow:scroll;height:250px;" layout="block">

This was selected as the best answer

Try out the sample code to get the records in scroll (if more than 10 records in your list) :


                                                <apex:page Controller="mycontroller">







                                                                .headerRow .headerStyle


                                                                                color: #CC0000 !important;


                                                                                TOP: expression(this.offsetParent.scrollTop-2);        




                                                                                <apex:form >

                                                                                   <apex:pageBlock title="My Content" mode="edit">

                                                                                                  <apex:pageBlockSection title="My Content Section" columns="1"   >

                                                                                                                  <apex:outputPanel layout="block" styleClass="container"  >         

                                                                                                                   <apex:pageBlockTable value="{!emplist}" var="item" align="top" width="100%" columns="10" headerclass="headerStyle">

                                                                                                                                   <apex:column value="{!item.Name}" ></apex:column>                                       








Hope this helps.


Hi Prageeth and Pardeep,


Thanks a lot. Its working fine now. I was not using overflow:auto so i was not getting it right previously.


Thanks a lot again.


I have one more customization to do. I want column header to remain freezed and only data to be scrolled.

When the pageblock table is overflowed that means scrollbar comes up the header of the column is gone when we scroll it.


I want to fix the column header so that data should be scrolled but not  header.

Any ideas on this?




I am also looking to freeze the header column and only data to be scrolled, did u got any solution for this.

If so can you please share it.







Nope. I did not got any solution for that and it does not seem to be possible as of now that we can freeze the header column.