function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
pq100pq100 

Problem with 3 column pageblocksection

Hi All

 

I've got a visualforce page with a couple of pageblocksections (see code below), the first has 2 cols the 2nd has 3, currently the 3rd column on the second section is squashed up against the right hand side of the screen.

 

what i'd like is for the 3rd column of the second pageblocksection to start where the 2nd column of the first pageblocksection starts. I've tried essing around with the Style settings and after a lot of messing around got it to work using position:absolute but then realised it doesn't resize when the window resizes. getting fairly fustrated!

 

Hopefully the above makes sense and thanks to anyine whio can help me with this!

Cheers

Paul

 

        <apex:pageBlockSection showHeader="true" title="Parties" columns="2">
            <apex:outputField value="{!Rental_Evidence__c.Landlord__c}" style="width: 100%;"/>
            <apex:outputField value="{!Rental_Evidence__c.Landlords_Agent__c}" style="width: 100%;"/>
            <apex:outputField value="{!Rental_Evidence__c.Tenant__c}" style="width: 100%;"/>
            <apex:outputField value="{!Rental_Evidence__c.Tenants_Agent__c}" style="width: 100%;"/>
            <apex:outputField value="{!Rental_Evidence__c.Arbitrator_Expert__c}" style="width: 100%;"/>
            <apex:outputField value="{!Rental_Evidence__c.X3rd_Party_Name__c}" style="width: 100%;"/>
        </apex:pageBlockSection>
        
        

        <apex:pageBlockSection showHeader="true" title="Allowances" columns="3" >


            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Assumed Term" for="assumed" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Assumed_Term__c}" id="assumed"  styleClass="blank"/>
            </apex:pageBlockSectionItem> 
            
            
          
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Yrs"/>
                <apex:outputField value="{!Rental_Evidence__c.Assumed_Term_Yrs__c}" id="assumedYrs" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
           
 
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Comments" for="assumedcoms" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Assumed_Term_Comments__c}" id="assumedcoms" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
        
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Rent Review Pattern" for="RR" styleClass="blank"/> 
                <apex:outputText value="{!Rental_Evidence__c.Rent_Review_Patterm__c}" id="RR" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
        
           
             <!--   <apex:outputLabel value="Yrs" style="position:absolute;right:60%"/>  -->
             <apex:pageBlockSectionItem >
                <apex:outputLabel value="Yrs" />
                <apex:outputField value="{!Rental_Evidence__c.Rent_Review_Pattern_Yrs__c}" id="RRyrs" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
        
        
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Comments" for="RRcoms" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Rent_Review_Pattern_Comments__c}" id="RRcoms" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
            
            
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Fitted Out" for="FO" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Fitted_Out__c}" id="FO" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
        
            <apex:pageBlockSectionItem />
        
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Comments" for="FOcoms" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Fitted_Out_Comments__c}" id="FOcoms" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
            
        
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Quantum" for="Qu" styleClass="blank"/>
                <apex:outputText value="{!Rental_Evidence__c.Quantum__c}" id="Qu" styleClass="blank"/>
            </apex:pageBlockSectionItem> 
        
            <apex:pageBlockSectionItem />
        
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Comments" for="Qucoms" styleClass="blank"/>
                <apex:outputtext value="{!Rental_Evidence__c.Quantum_Comments__c}" id="s"/>
            </apex:pageBlockSectionItem> 


        </apex:pageBlockSection>

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
pq100pq100

Hi

 

if you set the columnClasses property of the panelGrid you can then just set the widths of each column (you'll need a column for the label and the field).

 

e.g.

    <style>

        .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
        .colStyle1 { width: 16.5%;text-align:right; padding-top:3px; padding-bottom:5px}
        .colStyle2 { width: 10%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle3 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle4 { width: 21%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle5 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle6 { width: 32%; padding-left:20px; padding-top:5px; padding-bottom:4px}
        .rowstyle { border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#E8E8E8 }
    </style>

 

        <apex:pageBlockSection showHeader="true" title="Allowances" columns="1" id="allowances">
            <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6" rowClasses="rowstyle">

 HTH

Cheers

Paul

All Answers

pq100pq100

In case anyone else is after something similar... PanelGrid did the job.

 

Cheers

Paul
LukashPLukashP

Can I ask how did it do the job ? Can you share ?

 

I am using pageBlockSection with columns="3" and it just renders terribly. The 3rd column has like 10% of the total space for the table.
pq100pq100

Hi

 

if you set the columnClasses property of the panelGrid you can then just set the widths of each column (you'll need a column for the label and the field).

 

e.g.

    <style>

        .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
        .colStyle1 { width: 16.5%;text-align:right; padding-top:3px; padding-bottom:5px}
        .colStyle2 { width: 10%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle3 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle4 { width: 21%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle5 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle6 { width: 32%; padding-left:20px; padding-top:5px; padding-bottom:4px}
        .rowstyle { border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#E8E8E8 }
    </style>

 

        <apex:pageBlockSection showHeader="true" title="Allowances" columns="1" id="allowances">
            <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6" rowClasses="rowstyle">

 HTH

Cheers

Paul

This was selected as the best answer
LukashPLukashP

But it does involve more work right ?

As I'm seeing the panelGrid does not render labels, so you have to add outputLabels manually.

Additionally I would have to use panelGroups for each label and data field, according to my short tests ?
pq100pq100

it is a bit more work, but nothing too serious... i didnt use panelGroups

 

        <apex:pageBlockSection showHeader="true" title="Allowances" columns="1" id="allowances">
            <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6" rowClasses="rowstyle">
                <apex:outputLabel value="Assumed Term" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Assumed_Term__c}" id="assumed"/>
                <apex:outputLabel value="Yrs" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Assumed_Term_Yrs__c}" id="assumedYrs"/>
                <apex:outputLabel value="Comments" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Assumed_Term_Comments__c}" id="assumedcoms"/>
                
                <apex:outputLabel value="Rent Review Pattern" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Rent_Review_Patterm__c}" id="RR"/>
                <apex:outputLabel value="Yrs" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Rent_Review_Pattern_Yrs__c}" id="RRyrs"/>
                <apex:outputLabel value="Comments" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Rent_Review_Pattern_Comments__c}" id="RRcoms"/>
                
                <apex:outputLabel value="Fitted Out" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Fitted_Out__c}" id="FO"/>
                <apex:outputLabel value="Yrs" styleClass="labStyle"/>
                <apex:pageBlockSectionItem />
                <apex:outputLabel value="Comments" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Fitted_Out_Comments__c}" id="FOcoms"/>
                
                <apex:outputLabel value="Quantum" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Quantum__c}" id="Qu"/>
                <apex:outputLabel value="Yrs" styleClass="labStyle"/>
                <apex:pageBlockSectionItem />
                <apex:outputLabel value="Comments" styleClass="labStyle"/>
                <apex:outputField value="{!Rental_Evidence__c.Quantum_Comments__c}" id="Qucoms"/>
                
            </apex:panelGrid>