function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dev401hasdev401has 

How to fix size of Output Panel or Pageblock table?

Hi


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) 
prageethprageeth

Try adding following styles to your outputPanel.

 

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

All Answers

prageethprageeth

Try adding following styles to your outputPanel.

 

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

This was selected as the best answer
Pradeep_NavatarPradeep_Navatar

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

 

                                                <apex:page Controller="mycontroller">

                                                                <style>

                                                                .container

                                                                {

                                                                  overflow:auto; 

                                                                  height:100px;   

                                                                }

                                                                .headerRow .headerStyle

                                                                {

                                                                                color: #CC0000 !important;

                                                                                position:relative;

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

                                                                }

 

                                                                </style>

                                                                                <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>                                       

                                                                                                                   </apex:pageBlockTable>

                                                                                                                </apex:outputPanel>         

                                                                                                   </apex:pageBlockSection>

                                                                                                </apex:pageBlock>

                                                                   </apex:form>

                                                                </apex:page>

 

Hope this helps.
dev401hasdev401has

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.
dev401hasdev401has

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?
chiranjeevitgchiranjeevitg

HI,

 

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.

 

 

Thanks.
dev401hasdev401has

@chiranjeevitg

 

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.