Apex Code Development You need to sign in to do that
Don't have an account?
John Neff Lightning Design System: Table row-height inconsistent- how do I fix?
Hello,
I am working on a LEX rollout at my company and have created a table that is displayed on the home page. I followed the guidelines here to style the table: https://www.lightningdesignsystem.com/components/data-tables and was succesful for the most part- except my table rows are displaying at twice the height that they should be.
Is there a problem with my page markup that is causing this? I am trying to make my table look identical to the one here: https://www.lightningdesignsystem.com/components/data-tables
Here is my page:
I am working on a LEX rollout at my company and have created a table that is displayed on the home page. I followed the guidelines here to style the table: https://www.lightningdesignsystem.com/components/data-tables and was succesful for the most part- except my table rows are displaying at twice the height that they should be.
Is there a problem with my page markup that is causing this? I am trying to make my table look identical to the one here: https://www.lightningdesignsystem.com/components/data-tables
Here is my page:
<apex:page controller="WeeklyOweController" lightningStylesheets="true">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<body>
<div class="slds-scope">
<b>Post-Pays</b>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col"><div class="slds-truncate" title="Buyer Name">Buyer Name</div></th>
<th scope="col"><div class="slds-truncate" title="Age">Age</div></th>
<th scope="col"><div class="slds-truncate" title="Funds Due">Funds Due</div></th>
<th scope="col"><div class="slds-truncate" title="Account Balance">Account Balance</div></th></tr>
</thead>
<tbody>
<apex:variable var="TotalOwe" value="{!0}"/>
<apex:repeat value="{!listOfPost}" var="pst">
<tr>
<td> <div class="slds-truncate" title="BuyerNameVal">{!LEFT(pst.Buyer_Name__c,35)}</div> </td>
<td> <div class="slds-truncate" title="DaysOpenVal">{!pst.Days_Open__c}</div></td>
<td> <div class="slds-truncate" title="BalanceCollVal"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pst.Balance_to_Collect__c,0)}"/> </apex:outputText> </div></td>
<td style="{!if(pst.AcctBal__c < 0,'color: #D84D44','color: #040404')}"><div class="slds-truncate" title="AcctBalVal"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pst.AcctBal__c,0)}"/> </apex:outputText></div></td>
</tr>
<apex:variable var="TotalOwe" value="{!TotalOwe+pst.Balance_to_Collect__c}"/>
</apex:repeat>
<tr>
<td><div class="slds-truncate" title="TotalDue"><b>Total Due:</b> </div></td>
<td><div class="slds-truncate" title="Spacer1"> </div></td>
<td><div class="slds-truncate" title="TotalDueVal"> <apex:outputText style="font-weight:800" value="${0, number}"> <apex:param value="{!TotalOwe}" /> </apex:outputText></div> </td>
<td><div class="slds-truncate" title="Spacer2"> </div></td></tr>
</tbody>
</table>
<br/>
<br/>
<b>Pre-Pays</b>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col"><div class="slds-truncate" title="Buyer Name">Buyer Name</div></th>
<th scope="col"><div class="slds-truncate" title="Age">Age</div></th>
<th scope="col"><div class="slds-truncate" title="Funds Due">Funds Due</div></th>
<th scope="col"><div class="slds-truncate" title="Account Balance">Account Balance</div></th></tr>
</thead>
<apex:variable var="TotalPre" value="{!0}"/>
<apex:repeat value="{!listOfPre}" var="pre">
<tr>
<td> <div class="slds-truncate" title="BuyerName2"> {!pre.Buyer_Name__c}</div> </td>
<td><div class="slds-truncate" title="Age2">{!pre.Days_Open__c}</div></td>
<td><div class="slds-truncate" title="BalColl2"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pre.Balance_to_Collect__c,0)}"/></apex:outputText></div></td>
<td style="{!if(pre.AcctBal__c < 0,'color: #D84D44','color: #040404')}"><div class="slds-truncate" title="AcctBal2"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pre.AcctBal__c,0)}"/> </apex:outputText></div></td>
</tr>
<apex:variable var="TotalPre" value="{!TotalPre+pre.Balance_to_Collect__c}"/>
</apex:repeat>
<tr>
<td><div class="slds-truncate" title="GrandTotal2"><b>Total Due:</b> </div></td>
<td><div class="slds-truncate" title="Spacer3"> </div></td>
<td><div class="slds-truncate" title="TotalVal2"><apex:outputText style="font-weight:800" value="${0, number}"> <apex:param value="{!TotalPre}" /> </apex:outputText> </div></td>
<td><div class="slds-truncate" title="Spacer4"> </div></td></tr>
</table>
</div>
</body>
</html>
</apex:page>
I would really appreciate any help!
Thanks,
John