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

Improve this question

1 Answer 1

Reset to default
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>
Improve this answer
2
  • Thnk for your feedback. Is not possible make that with standard VF components?
    – Klodj_Meta
    Commented Feb 23, 2014 at 16:06
  • 1
    Everything is possible. You question is purely CSS based. I advice you to learn some CSS basics.
    – Ashwani
    Commented Feb 23, 2014 at 16:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .