6

I have values that need to be setup like this:

enter image description here

Displayed like this, but with four columns:

enter image description here

I tried this way but this a mess... (The above picture is an example and would have USD $ 0.00 inline with the check total): enter image description here

The code I'm using is:

<apex:page standardController="BookingEvent__c" extensions="EventInclusiveTotalPriceInlineExt" standardStylesheets="true" tabstyle="BookingEvent__c" docType="html-5.0">
  <apex:form>
    <apex:pageBlock mode="maindetail">
      <apex:pageBlockSection columns="4">
        <apex:outputfield value="{!be.ForecastRevenue1__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue2__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue3__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue4__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue5__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue6__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue7__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue8__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue9__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue10__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue11__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue12__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue13__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue14__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue15__c}"></apex:outputfield>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

I do not know how to style and it needs to look like it is displayed in the second pic.

Any help would be great, I'm new to VF and not great at styling yet and am having troubles finding exactly what i'm looking for.

3
  • 4
    Probably easier to just roll your own standard html <table> and style it as needed.
    – Adrian Larson
    Aug 11 '16 at 16:21
  • 3
    Its all about the CSS... I would agree with @AdrianLarson that putting it in a Table and styling it yourself will likely be the simplest solution. You may want to also use outputtext instead of outputfield to allow you more control over the formatting of your currency. That should help along with CSS to put the $ aligned to the left and the rest to the right.
    – crmprogdev
    Aug 11 '16 at 16:41
  • 2
    In addition to the comments by @AdrianLarson and @crmprogdev, it is also worth noting you can use styleClass="" and place CSS classes into this on both <apex:outputText> and <apex:outputField>, as you would in pure HTML (e.g. <div class="myCSSClass">). You can also take advantage of Chrome Developer tools to "fiddle" with these. Salesforce renders a lot of HTML using VF components, so using <table> may be easier. I just thought it's worth considering!
    – Dan Jones
    Aug 11 '16 at 16:57
4

Since we have a great comment thread going on, a wiki might be a good place to summarize:

  • You will have an easier time styling your page if you build your own <table> using standard html elements
  • No matter how you go about it, the right tool for the job is CSS
  • You can format currency values more easily using <apex:outputText> than <apex:outputField>
  • You can apply a styleClass attribute to your output components and use a stylesheet
    • You can also quickly tweak a style using Developer Tools (inspect element), then copy those into your <style> tag or stylesheet when they're adjusted how you want
1

This is the ideal scenario to leverage <apex:panelGrid> in visualforce page.

For more information refer panelGrid

I have modified the code at my developer org and it is working as expected below.

Expected Output

Use of Panel Grid

Visualforce with panelGrid

<apex:page standardController="Booking_Event__c" extensions="EventInclusiveTotalPriceInlineExt" standardStylesheets="true" tabstyle="Booking_Event__c" docType="html-5.0">


<style>
.colStyle1 { width: 10%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
.colStyle2 { width: 10%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
.colStyle3 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
.colStyle4 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px} 
.colStyle5 { width: 10%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
.colStyle6 { width: 10%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
.colStyle7 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
.colStyle8 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px} 
</style>
<apex:form>
<apex:pageBlock mode="maindetail">
  <apex:panelGrid columns="8" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6,colStyle7,colStyle8">
        <apex:outputLabel style="font-weight:600">Forecase_Revenue1__c</apex:outputLabel>  
        <apex:outputfield value="{!bk.Forecase_Revenue1__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue2__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue2__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue3__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue3__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue4__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue4__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue5__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue5__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue6__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue6__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue7__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue7__c}"></apex:outputfield>
        <apex:outputLabel style="font-weight:600">Forecase_Revenue8__c</apex:outputLabel> 
        <apex:outputfield value="{!bk.Forecase_Revenue8__c}"></apex:outputfield>        
  </apex:panelGrid>
</apex:pageBlock>
</apex:form>
</apex:page>

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .