+ Start a Discussion
HeenaHeena 

Scrollbar in Visualforce Page

Hi All,

 

I am developing a visualforce page that has a data table to be dispalyed. The table has around 15 columns to be displayed and the output looks too clumsy. Can anyone plese let me know how to get a scrollbar to traverse in a visualforce page. I could not find any tag relating to scrollbar.

 

Thanks,

Heena 

Best Answer chosen by Admin (Salesforce Developers) 
SuriSuri

Hi Heena,

 

The scrollbar can be shown on a visualforce page using the inline CSS Style: "overflow:auto" in an Output Panel.

 

And then Place your Datable inside the Output Panel.

 

<apex:outputPanel  layout="block" style="overflow:auto;width:750px;height:250px" >

    <apex:datable>

    .

    .

    .

    </apex:datable>

</apex:OutputPanel>

 

In the above style,

 

width:750px - enables the Horizontal Scroll Bar

height: 250px - enables the Vertical Scroll Bar

 

If you only need the Horizontal Scroll Bar, the height attibute can be removed.

 

 

All Answers

SuriSuri

Hi Heena,

 

The scrollbar can be shown on a visualforce page using the inline CSS Style: "overflow:auto" in an Output Panel.

 

And then Place your Datable inside the Output Panel.

 

<apex:outputPanel  layout="block" style="overflow:auto;width:750px;height:250px" >

    <apex:datable>

    .

    .

    .

    </apex:datable>

</apex:OutputPanel>

 

In the above style,

 

width:750px - enables the Horizontal Scroll Bar

height: 250px - enables the Vertical Scroll Bar

 

If you only need the Horizontal Scroll Bar, the height attibute can be removed.

 

 

This was selected as the best answer
SuriSuri
Sorry, spelling mistake: I meant <apex:datatable>
HeenaHeena

Thanks Suri.

 

I tried the same in my code 

<apex:page controller="testlist"> <apex:form > <apex:pageBlock > <apex:outputPanel id="panel1"> <apex:outputtext value="No of Records per Page "/> <apex:inputText value="{!NumberofRec}" title="Records per page" size="3" maxlength="3" /> <!--<apex:actionsupport event="onchange" action="{!First}" rerender="table1" />--> <apex:actionsupport event="onchange" rerender="pno,totalpageno,table1"/> </apex:outputPanel> <br/> <apex:outputpanel id="panel2"> <apex:outputtext value="Page "/> <apex:inputtext value="{!pgno}" id="pno" title="Page No" size="2" maxlength="2"/> <apex:outputtext value="of {!totalpages}" id="totalpageno"/> </apex:outputPanel> <apex:outputpanel id="panel3"> <div style="over-flow:auto; width:100px; height:50px"> <apex:pageBlockTable value="{!opportunities}" var="o" id="table1" > <apex:column value="{!o.name}"/> <apex:column value="{!o.closedate}"/> </apex:pageBlockTable> </div> </apex:outputpanel> <apex:panelGrid columns="4" id="navigation"> <apex:commandLink action="{!First}" reRender="pno,table1"> First</apex:commandLink> <apex:commandLink action="{!previous}" reRender="pno,table1"> Previous</apex:commandLink> <apex:commandLink action="{!next}" reRender="pno,table1">Next</apex:commandLink> <apex:commandLink action="{!Last}" reRender="pno,table1"> Last</apex:commandLink> </apex:panelGrid> </apex:pageBlock> </apex:form> </apex:page>

 But the div tag is beginning from the top of the page, instead of starting from the pageblocktable. This is causing a lot of overlapping of tags in my page. Do you know the reason why? Am i missing something?


 

SuriSuri

Did you try using the style attribute in the OutputPanel instead of using the "div" inside the OutputPanel?

 

<apex: OutputPanel  layout="block" style="overflow:auto;width:750px;height:250px" >

 

Does it happen even if you use like this?

HeenaHeena

Hi Suri,

 

I tried this code, but didn't get any scrollbar.

 

 

<apex:page controller="testlist"> <div style="over-flow:auto; width:700px; height:10px"> <apex:dataTable value="{!opportunities}" var="o" id="table1" > <apex:column value="{!o.name}"/> <apex:column value="{!o.closedate}"/> </apex:dataTable> </div> </apex:page>

 and when i tried to use the style attribute instead of div, it gave me the same output, no scrollbar :(

 

Do you know the answer?

 

 

HeenaHeena

Hey,

 got my answer i was typing over-Flow instead of overflow :)

 

Thanks Suri.
HeenaHeena

Hi,

 

I was just wondering if i could freeze my column header as i have a scrollbar now. Any idea how to do it?

 

Thanks,

Heena

Ram VaidyanathanRam Vaidyanathan

Heena, 

   Where you able to freeze the column headers?, If so can you share the code.

 

-Ram

minkeshminkesh

hello suri,

                  I have written same code as you suggest but it only display vertical scrollbar.plz give me reply here is my code  given below.

 

 


             <apex:outputPanel id="opanel" layout="block" style="overflow:auto;width:1000px;height:700px;">
                <!-- <div id="opaneldiv" style="overflow:auto;width:1000px;height:700px;"> -->
                 
                    <table width="100%">
                       <tr>
                         <td>
                            <apex:repeat value="{!currentProcess.processActivities}" var="act">
                                <table>
                                    <tr>
                                        <td width="{!act.preceedingColumnWidth}"></td>
                                        <td>
                                            <div style="width:658px;height:65px;float:left;">
        
                                                <div style="background:url('{!$Resource.lcourve}') no-repeat left top; width:3px; height:65px; float:left;"></div>
                                                <div style="background:url('{!$Resource.rcourve}') no-repeat right top;  width:3px; height:65px; float:right;"></div>
                                                <div style="background:url('{!$Resource.centercourve}') repeat-x  left top; width:652px; height:65px; float:left;">
                                                                                                                            
                                                     <table width="650" height="62" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                        <td width="15%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center" ><b>Connection Type</b></p></td>
                                                                        <td width="20%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center"><b>Activity</b></p></td>
                                                                        <td width="18%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center"><b>Is Start</b></p></td>
                                                                        <td width="17%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center"><b>Is End</b></p></td>
                                                                        <td width="19%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center"><b>Role</b></p></td>
                                                                        <td width="9%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center" ><b>Delete</b></p></td>
                                                                        <td width="9%"><p style="font-family:12px;font-family: Arial, Helvetica, sans-serif;color:#000000;line-height:3px;text-align: center" ><b>Add</b></p></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td height="32" style="padding-left: 6px;text-align: center;vertical-align: middle;" ><apex:inputField value="{!act.procActivity.ConnectionType__c}" onchange="checkvalue(this);"/></td>
                                                                        <td style="padding-left: 10px;text-align: center;vertical-align: middle;" ><apex:inputField value="{!act.procActivity.Activity__c}" /></td>
                                                                        <td style="text-align: center;vertical-align: middle;" ><apex:inputField value="{!act.procActivity.IsStartActivity__c}"/></td>

 

 

 

 

 

 

here is output:--->output

ApexBeginnerApexBeginner

Hi Minkesh,

 

Where you able to freeze the column header.

I am not able to understand how you are getting the preceeding column width.

Could you please share me a code sample.

 

<apex:repeat value="{!currentProcess.processActivities}" var="act">
                                <table>
                                    <tr>
                                        <td width="{!act.preceedingColumnWidth}"></td>

 

Thanks

Laureano CostaLaureano Costa
If I understood your question well and you have an inline VF page in some object's detail view, regarding the scrollbar, it's already solved now out of the box. When editing the page layout of the object you are including your VF page for, hover the custom page and click on the tool icon, an overlay will be shown where you have to check the "show scrollbars" option.
Anthony RoblesAnthony Robles
I used Suri's solution with "max-height" instead.
Abhinav UpadhyayAbhinav Upadhyay

Add the following:

style="overflow-y: scroll;"