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
Michael Clarke 16Michael Clarke 16 

How do you reduce white space in a vf page?

Created my first VF Page today.
How do I get rid of the white space that takes up half of the component in a Lightning page?

User-added image
karthikeyan perumalkarthikeyan perumal
Hello Michael, 

You mean to say this space. kinldy share your VF page code and how  you are pluging your page .. 
User-added image
Thanks
karthik
 
Michael Clarke 16Michael Clarke 16
Yes, I am a beginner at VF Pages so there is no formatting. I would like to remove the excess whitespace you have highlighted in yellow and match the format to the Lightning page it is embedded in.

<apex:page standardController="Opportunity">
<!-- Retrieve specific fields for population in a Custom Highlights Panel on the Opportunity Record Page -->    
    <apex:pageBlock title="Opportunity Summary">
        <apex:pageBlockTable value="{!Opportunity}" var="opp">
            <apex:column title="Customer(s)"/>
              <apex:column title="Guarantor(s)"/>
              <apex:column title="Lender"/>
              <apex:column title="Lender ID"/>
              <apex:column title="Broker"/>
              <apex:column title="Broker Code"/>
              <apex:column title="Loan Amount"/>
              <apex:column title="Close Date"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp1">
              <apex:column value="{!opp1.Applicant_1__c}"/>
              <apex:column title="Guarantor 1"/>
            <apex:column value="{!opp1.Lender__c}"/>
              <apex:column value="{!opp1.Account.Lender_ID__c}"/> <!-- Get Lender ID field on Account object -->
              <apex:column value="{!opp1.Owner.Name}"/> <!-- Get name of Opportunity Owner -->
              <apex:column value="{!opp1.Owner.AFG_Code__c}"/> <!-- Get AFG Code field on User object -->
              <apex:column value="{!opp1.Amount}"/>
              <apex:column value="{!opp1.CloseDate}"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp2">
              <apex:column value="{!opp2.Applicant_2__c}"/>
              <apex:column title="Guarantor 2"/>
           </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
Michael Clarke 16Michael Clarke 16
Yes, I am a beginner at VF Pages so there is no formatting. I would like to remove the excess whitespace you have highlighted in yellow and match the format to the Lightning page it is embedded in.

<apex:page standardController="Opportunity">
<!-- Retrieve specific fields for population in a Custom Highlights Panel on the Opportunity Record Page -->    
    <apex:pageBlock title="Opportunity Summary">
        <apex:pageBlockTable value="{!Opportunity}" var="opp">
            <apex:column title="Customer(s)"/>
              <apex:column title="Guarantor(s)"/>
              <apex:column title="Lender"/>
              <apex:column title="Lender ID"/>
              <apex:column title="Broker"/>
              <apex:column title="Broker Code"/>
              <apex:column title="Loan Amount"/>
              <apex:column title="Close Date"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp1">
              <apex:column value="{!opp1.Applicant_1__c}"/>
              <apex:column title="Guarantor 1"/>
            <apex:column value="{!opp1.Lender__c}"/>
              <apex:column value="{!opp1.Account.Lender_ID__c}"/> <!-- Get Lender ID field on Account object -->
              <apex:column value="{!opp1.Owner.Name}"/> <!-- Get name of Opportunity Owner -->
              <apex:column value="{!opp1.Owner.AFG_Code__c}"/> <!-- Get AFG Code field on User object -->
              <apex:column value="{!opp1.Amount}"/>
              <apex:column value="{!opp1.CloseDate}"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp2">
              <apex:column value="{!opp2.Applicant_2__c}"/>
              <apex:column title="Guarantor 2"/>
           </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
Michael Clarke 16Michael Clarke 16
OK, so I used lightningStylesheets="true", so now the style is the same as the rest of the page. Just need to remove excess white space.
Michael Clarke 16Michael Clarke 16
My latest code, it is improving. How do I create a new line in a table without closing the table and creating a new one? Using two tables means the fields don't line up.

<apex:page lightningStylesheets="true" standardController="Opportunity">
<!-- Retrieve specific fields for population in a Custom Highlights Panel on the Opportunity Record Page -->    
    <apex:pageBlock title="Opportunity Summary">
        <apex:pageBlockTable value="{!Opportunity}" var="opp1">
              <apex:column headerValue="Customer(s)" value="{!opp1.Applicant_1__c}"/>
              <apex:column headerValue="Guarantor(s)">Guarantor 1</apex:column>
              <apex:column headerValue="Lender" value="{!opp1.Lender__c}"/>
              <apex:column headerValue="Owner" value="{!opp1.Owner.Name}"/> <!-- Get name of Opportunity Owner -->
              <apex:column value="{!opp1.Owner.AFG_Code__c}"/> <!-- Get AFG Code field on User object -->
              <apex:column headerValue="Amount" value="{!opp1.Amount}"/>
              <apex:column headerValue="Close Date" value="{!opp1.CloseDate}"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp2">
              <apex:column headerValue="" value="{!opp2.Applicant_2__c}"/>
              <apex:column headerValue="">Guarantor 2</apex:column>
              <apex:column headerValue="" value="{!opp2.Account.Lender_ID__c}"/> <!-- Get Lender ID field on Account object -->
           </apex:pageBlockTable>
    </apex:pageBlock>
    
</apex:page>
karthikeyan perumalkarthikeyan perumal
Hello, 

to create a line without closing table.. i have modified your code use below to create line.
  
<apex:page lightningStylesheets="true" standardController="Opportunity">
<!-- Retrieve specific fields for population in a Custom Highlights Panel on the Opportunity Record Page -->    

<style>
        [id$=table1]>tbody>tr:last-child td { border-top: solid 3px !important; }
</style>

    <apex:pageBlock title="Opportunity Summary">
        <apex:pageBlockTable value="{!Opportunity}" var="opp1" id="table1">
              <apex:column headerValue="Customer(s)" value="{!opp1.Applicant_1__c}"/>
              <apex:column headerValue="Guarantor(s)">Guarantor 1</apex:column>
              <apex:column headerValue="Lender" value="{!opp1.Lender__c}"/>
              <apex:column headerValue="Owner" value="{!opp1.Owner.Name}"/> <!-- Get name of Opportunity Owner -->
              <apex:column value="{!opp1.Owner.AFG_Code__c}"/> <!-- Get AFG Code field on User object -->
              <apex:column headerValue="Amount" value="{!opp1.Amount}"/>
              <apex:column headerValue="Close Date" value="{!opp1.CloseDate}"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp2">
              <apex:column headerValue="" value="{!opp2.Applicant_2__c}"/>
              <apex:column headerValue="">Guarantor 2</apex:column>
              <apex:column headerValue="" value="{!opp2.Account.Lender_ID__c}"/> <!-- Get Lender ID field on Account object -->
           </apex:pageBlockTable>
    </apex:pageBlock>
    
</apex:page>

Hope this will helps you. 

Thanks
karthik

 
Michael Clarke 16Michael Clarke 16
Thanks Karthik,
Now to reduce the white space
karthikeyan perumalkarthikeyan perumal
Hello Michael, 

Use rendered tage in pageblocktabe render it when its needed. so this way you can avoid extra space in vf page. in this below code you have to put your condition in rendered part in both table.

try it out. 
<apex:page lightningStylesheets="true" standardController="Opportunity">
<!-- Retrieve specific fields for population in a Custom Highlights Panel on the Opportunity Record Page -->    

<style>
        [id$=table1]>tbody>tr:last-child td { border-top: solid 3px !important; }
</style>

    <apex:pageBlock title="Opportunity Summary"  >
        <apex:pageBlockTable value="{!Opportunity}" var="opp1" id="table1" rendered="{your condition her}">
              <apex:column headerValue="Customer(s)" value="{!opp1.Applicant_1__c}"/>
              <apex:column headerValue="Guarantor(s)">Guarantor 1</apex:column>
              <apex:column headerValue="Lender" value="{!opp1.Lender__c}"/>
              <apex:column headerValue="Owner" value="{!opp1.Owner.Name}"/> <!-- Get name of Opportunity Owner -->
              <apex:column value="{!opp1.Owner.AFG_Code__c}"/> <!-- Get AFG Code field on User object -->
              <apex:column headerValue="Amount" value="{!opp1.Amount}"/>
              <apex:column headerValue="Close Date" value="{!opp1.CloseDate}"/>
           </apex:pageBlockTable>
        <apex:pageBlockTable value="{!Opportunity}" var="opp2" rendered="{your condition her}">
              <apex:column headerValue="" value="{!opp2.Applicant_2__c}"/>
              <apex:column headerValue="">Guarantor 2</apex:column>
              <apex:column headerValue="" value="{!opp2.Account.Lender_ID__c}"/> <!-- Get Lender ID field on Account object -->
           </apex:pageBlockTable>
    </apex:pageBlock>
    
</apex:page>

Thanks
karthik