You need to sign in to do that
Don't have an account?
Joanne 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.
<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>
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
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
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">