Apex Code Development You need to sign in to do that
Don't have an account?
Visualforce dashboard and CSS - standard way to implement?
Hello.
Is there any documentation on how to properly mimic the default Salesforce look on dashboards in my visualforce dashboard components? I've tried including the standardStylesheets in my apex:page definition, and assigning the same classes to my output table/rows/columns, but that doesn't work. My assumption is that it's related to the iFrame that's used for using Visualforce on dashboards.
My code is below. It is close, but not exact. I've had to "fake" a couple of things to get it close. For example:
- Created a div around everything with the "pbBody" class
- Manually removed borders on each cell
- Create individual styles for the "last" and "even " row styles
Is there a standard method of doing this?
<apex:page controller="CtrlDashAnnualClosedComp" showheader="false" sidebar="false" standardStylesheets="true">
<apex:stylesheet value="/sCSS/Theme3/default/dashboard.css" />
<style type="text/css">
.list tr.last td { border-bottom-width:0px;}
.list tr.even td { background-color: #eeeeee;}
</style>
<div class="pbBody">
<table class="list" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr class="headerRow">
<th scope="col" style="border-width: 0px;"> </th>
<th scope="col" class="numericalColumn" style="border-width: 0px;">{!firstYear}</th>
<th scope="col" class="numericalColumn" style="border-width: 0px;">{!secondYear}</th>
</tr>
<apex:repeat var="o" value="{!dashList}">
<tr class="{!o.CSSclass}">
<td style="border-width: 0px;"><span class="dashboardRowLabel">{!o.compMonth}</span></td>
<td class="numericalColumn" style="border-width: 0px;"><span class="dashboardRowValue"><apex:outputText value="{0,number,currency}"><apex:param value="{!o.firstYearPrem}"/></apex:outputText></span></td>
<td class="numericalColumn" style="border-width: 0px;"><span class="dashboardRowValue"><apex:outputText value="{0,number,currency}"><apex:param value="{!o.secondYearPrem}"/></apex:outputText></span></td>
</tr>
</apex:repeat>
</table>
</div>
</apex:page>
Thanks in advance.
-Greg
Instead of the <table> and <apex:repeat> use an <apex:dataTable>.
https://cs3.salesforce.com/apexpages/apexcomponents.apexp
Hopefully I am correctly interpreting what you want here.
Hi Damien.
Thanks for the prompt reply. Unfortunately, that does not work either. The output from apex:dataTable has no CSS applied at all. I would then have to take a similar approach to what I've already done, using the various CSS attributes of apex:column, apex: dataTable, etc. to "fake" it and get close.
I don't have any issue assigning the CSS classes, whether it's via apex:repeat or apex:dataTable. I just need to know what classes need to be assigned to where, and am hopeful someone can shed some light.
-Greg
Maybe check out the "/** Lists **/" section of extended.css? Looks like they're using a table class "list", header rows class "headerRow" and rows "dataRow"?