[SalesForce] Scrollbar for pageBlockSection column1 but not for column 2

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

enter image description here

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

<apex:page controller="TestScrollController">
    <apex:pageBlock >
        <apex:pageBlockSection title="List Of Numbers" columns="2" >   
            <apex:pageBlockSectionItem id="columnWithScroll">
                <apex:outputPanel layout="block" style="overflow: auto; height: 100px;">
                    <apex:repeat value="{!numbers}" var="number">
                        <apex:outputText value="{!number}" />
                        <br/>
                    </apex:repeat>
                </apex:outputPanel>
            </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>

</apex:page>

Which yields the following (note the scroll bar on the panel):

enter image description here

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.

Related Topic