Salesforce Developer Community

Joanne Butterfield 16
NEWBIE
0 Points
Member since 2022

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
1

Questions
2

Replies

Visualforce columns

Hi All,
I'm looking for some help on column widths. I have a visualforce page in a record, as I would like to see 4 rows at once. 1 label and 3 fields. I would like the column widths to all be the same, but its all over the place. The first two columns are very large, and the last two squished at the end. Any help would be appreciated.

User-added image

<apex:page standardController="ROI_Calculator__c">
         
  <apex:pageBlock title="Cost Savings Estimates">

<apex:pageBlockSection columns="4" showHeader="true" title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns"> 

Cementitious content reduction (%)
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct3__c}" style="width:25%"/>
Cementitious content reduction (lbs/kg)
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_3__c}" style="width:25%"/>
Break-even Production (yds/m3 - months)
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_yds_months_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_Len_months_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_Len_months_3__c}" style="width:25%"/>
</apex:pageBlockSection>
      
      
 <apex:pageBlockSection columns="4" showHeader="true" title="Return On Investment Monthly"> 
Production Savings / Month 
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_3__c}" style="width:25%"/>
Value Added Services
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_3__c}" style="width:25%"/>
Technology Expenses / Month
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_3__c}" style="width:25%"/>
Net Saving (Loss) / Month
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_3__c}" style="width:25%"/>
</apex:pageBlockSection>
      
 <apex:pageBlockSection columns="4" showHeader="true" title="Return On Investment / Yard/Metre"> 
Production Savings - Yard/Metre 
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct3__c}" style="width:25%"/>
Technology Expenses - Yard/Metre
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Yard_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Length_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Length_3__c}" style="width:25%"/>
Net Saving (Loss) - Yard/Metre
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Yard_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Length_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Length_3__c}" style="width:25%"/>
</apex:pageBlockSection>      
</apex:page>

Joanne Butterfield 16
June 04, 2022
Like
0

SOLVED

4 replies

Visualforce columns

<apex:page standardController="ROI_Calculator__c">
         
  <apex:pageBlock title="Cost Savings Estimates">

<apex:pageBlockSection columns="4" showHeader="true" title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns"> 

Cementitious content reduction (%)
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct3__c}" style="width:25%"/>
Cementitious content reduction (lbs/kg)
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Cementitious_content_reduct_weight_3__c}" style="width:25%"/>
Break-even Production (yds/m3 - months)
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_yds_months_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_Len_months_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Break_even_Production_Len_months_3__c}" style="width:25%"/>
</apex:pageBlockSection>
      
      
 <apex:pageBlockSection columns="4" showHeader="true" title="Return On Investment Monthly"> 
Production Savings / Month 
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Production_Savings_Month_3__c}" style="width:25%"/>
Value Added Services
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.ValueAdded_3__c}" style="width:25%"/>
Technology Expenses / Month
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Month_3__c}" style="width:25%"/>
Net Saving (Loss) / Month
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Month_3__c}" style="width:25%"/>
</apex:pageBlockSection>
      
 <apex:pageBlockSection columns="4" showHeader="true" title="Return On Investment / Yard/Metre"> 
Production Savings - Yard/Metre 
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.SavingsReduct3__c}" style="width:25%"/>
Technology Expenses - Yard/Metre
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Yard_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Length_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Technology_Expenses_Length_3__c}" style="width:25%"/>
Net Saving (Loss) - Yard/Metre
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Yard_1__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Length_2__c}" style="width:25%"/>
  <apex:outputField label="" value="{!ROI_Calculator__c.Net_Saving_Loss_Length_3__c}" style="width:25%"/>
</apex:pageBlockSection>      
</apex:page>

Joanne Butterfield 16
June 04, 2022
Like
0