6

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

|improve this question
  • Using the tag PageBlockSectionItem, I do not see this happening if you want to 'merge' multiple row columns. This is very possible to do only using 2 divs, and setting some CSS attributes such as overflow. If you use the repeat tag you can build your own table to meet these goals and using 'rowspan' attribute on the cells you need merged vertically. I guess what I'm saying is you need to provide more information. This is still very vague in how you wan to use it – Double A Jul 7 '14 at 15:43
13
+100

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.

|improve this answer
  • That was exactly what I was looking for! Thank you very much. – Louis Pujol Jul 7 '14 at 15:50
  • Great, happy to help :) – Phil Hawthorn Jul 7 '14 at 15:51
  • For the height attribute in the outputPanel, do you know how to set it relative to the height the page will be as an iframe? – Louis Pujol Jul 7 '14 at 15:55
  • If you want to set the outputPanel to be the same height as the parent, you can use height: 100%; instead of height: 100px; – Phil Hawthorn Jul 7 '14 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.