I have a pageBlockSection that has 2 columns. I would like 1 scrollbar for the left column so that if the information on the left column is very large then you can scroll through it without changing what you see on the right column.
Here is a summary of my code and a picture to hopefully illustrate what I mean
<apex:pageBlock >
<apex:pageBlockSection title="List Of Numbers" columns="2" >
<apex:pageBlockSectionItem id="columnWithScroll">
<apex:repeat value="{!numbers}" var="number">
<apex:outputText value="{!number}" />
<br/>
</apex:repeat>
</apex:PageBlockSectionItem>
<apex:pageBlockSectionItem id="columnWithoutScroll">
<apex:outputPanel >
<apex:outputText value="I don't want this section to move" />
<br/><br/>
<apex:outputText value="If the left column gets too long" />
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
The variable numbers is just a List<Integer>
from 1 to 20
Best Answer
How about something like this:
Which yields the following (note the scroll bar on the panel):
Use the
overflow: auto
css on the output panel. By using an output panel with layout="block", we get a DIV within the layout table produced by Salesforce. Once we have a div, you can specify the overflow you require. I've set the size to 100px for illustrative purposes.