function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Joanne Butterfield 16Joanne Butterfield 16 

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>
 


 

Best Answer chosen by Joanne Butterfield 16
Joanne Butterfield 16Joanne Butterfield 16

I went with a PanelGrid and it worked out

 

<apex:page standardController="ROI_Calculator__c">
         
  <style>
.colStyle1 { width: 25%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
.colStyle2 { width: 25%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
.colStyle3 { width: 25%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
.colStyle4 { width: 25%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px} 
</style>
  
 <apex:form > 
<apex:pageBlock title="Cost Savings Estimates">
 
 <apex:pageBlockSection showHeader="true" title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns" columns="1"> 
  <apex:panelGrid  columns="4" border="0" styleClass="tableStyle" width="100%"  title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4">

All Answers

PriyaPriya (Salesforce Developers) 
Hey Joanne,

check this link :-

https://salesforce.stackexchange.com/questions/84242/how-to-change-the-column-width-in-visualforce 

If it help, kindly mark it as the best answer.

Thanks
Priya Ranjan
Joanne Butterfield 16Joanne Butterfield 16
Thanks for your response @Priya, but I still have the same issue when having 25% on all 4 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"> 

  <apex:outputField label="" value="{!ROI_Calculator__c.Reduct1__c}" style="width:25%"/>
  <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%"/>
  
  <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_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%"/>
  
  <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_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:pageBlock>

</apex:page>

User-added image
Joanne Butterfield 16Joanne Butterfield 16

I went with a PanelGrid and it worked out

 

<apex:page standardController="ROI_Calculator__c">
         
  <style>
.colStyle1 { width: 25%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
.colStyle2 { width: 25%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
.colStyle3 { width: 25%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
.colStyle4 { width: 25%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px} 
</style>
  
 <apex:form > 
<apex:pageBlock title="Cost Savings Estimates">
 
 <apex:pageBlockSection showHeader="true" title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns" columns="1"> 
  <apex:panelGrid  columns="4" border="0" styleClass="tableStyle" width="100%"  title="Cost Savings Estimates: Monthly & Per Cubic Yard/Metre Returns" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4">

This was selected as the best answer