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

March 12, 2009
·
Like
0
·
Follow
1

Best Answer chosen by Admin (Salesforce Developers)

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

March 12, 2009
·
Like
7
·
Dislike
0

This was selected as the best answer

Suri
Sorry, spelling mistake: I meant <apex:datatable>

March 12, 2009
·
Like
1
·
Dislike
0

Heena
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" 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?

March 13, 2009
·
Like
0
·
Dislike
0

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

March 13, 2009
·
Like
0
·
Dislike
0

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

March 13, 2009
·
Like
0
·
Dislike
0

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

Thanks Suri.

March 13, 2009
·
Like
0
·
Dislike
0

Heena
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

March 13, 2009
·
Like
0
·
Dislike
0

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

-Ram

July 15, 2010
·
Like
0
·
Dislike
0

minkesh
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;">
                
                    <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:--->

January 15, 2011
·
Like
0
·
Dislike
0

ApexBeginner
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

January 10, 2012
·
Like
0
·
Dislike
0

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

March 3, 2014
·
Like
0
·
Dislike
0

Anthony Robles
I used Suri's solution with "max-height" instead.

May 2, 2014
·
Like
0
·
Dislike
0

Abhinav Upadhyay
Add the following:

style="overflow-y: scroll;"

November 9, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Scrollbar in Visualforce Page

All Answers

You need to sign in to do that.