1

I'm trying to create a VF page which has more pageblocks, also in parallel, which can work like frames, but i have some problems.

I'm actually trying to create a page with three blocs (look the img), but I have the problem that the second block moves as the third block become higher. How can i set the header of the two parallel blocks to not move and to be parallel?

enter image description here

I put also my code, which is a mix of html and VF apex. There is any better way to do, what i'm trying to do?

<apex:page showHeader="false" standardController="Account" extensions="TimeSpentController3">
<apex:pageBlock title="Block1" >    </apex:pageBlock>
<table width="100%" height="200">
    <tbody>
        <tr>
            <td width="30%">
                <apex:pageBlock title="Block2" ></apex:pageBlock>
            </td>
            <td>
                <apex:pageBlock title="Block3" >
                    <apex:pageblockSection title="BlockSection of Block3" columns="1">
                            <apex:outputText >XXXXX</apex:outputText>
                             ....
                            <apex:outputText >XXXXX</apex:outputText>
                    </apex:pageblockSection> 
                </apex:pageBlock>
            </td>
        </tr>
    </tbody>
</table>

Thnks for any feedback

1

If you are looking for page like:

enter image description here

This can be achieved from CSS:

<apex:page showHeader="false" standardController="Account">
<apex:pageBlock title="Block1" >   I am out of table :( :( <br/> </apex:pageBlock>
<table width="100%" height="200">
    <tbody>
        <tr>
            <td width="30%;" style="vertical-align:top">
                <apex:pageBlock title="Block2" >
                  Pageblock demo
                  <br/>
                  I am up !
                </apex:pageBlock>
            </td>
            <td  style="vertical-align:top;">
                <apex:pageBlock title="Block3" >
                    <apex:pageblockSection title="BlockSection of Block3" columns="1">
                            <apex:outputText >XXXXX</apex:outputText>
                             <apex:outputText >XXXXX</apex:outputText>
                             <apex:outputText >XXXXX</apex:outputText>
                             <apex:outputText >XXXXX</apex:outputText>
                             <apex:outputText >XXXXX</apex:outputText>
                            <apex:outputText >XXXXX</apex:outputText>
                    </apex:pageblockSection> 
                </apex:pageBlock>
            </td>
        </tr>
    </tbody>
</table>
</apex:page>
2
  • Thnk for your feedback. Is not possible make that with standard VF components?
    – Klodj_Meta
    Feb 23 '14 at 16:06
  • 1
    Everything is possible. You question is purely CSS based. I advice you to learn some CSS basics.
    – Ashwani
    Feb 23 '14 at 16:41

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.