Tile components having a label and a data field mis-align when the label wraps #61
Description
I am using a Tile to show a list of items with each item in the list having a label and a data value.The result I want is:
Lifetime Total Fundraising: $12,345.00
Lifetime Total Cash: $44,555.99
What I am getting is:
Lifetime Total $12,345.00
Fundraising: $44,555.99
Lifetime Total Cash:
The word "Fundraising" wraps to the next line showing an incorrect value next to it. The last label "Lifetime Total Cash" is shoved down a line with no data value next to it. If the label must wrap it should look like this:
Lifetime Total
Fundraising: $12,345.00
Lifetime Total Cash: $44,555.99
In addition to this issue, I have a question as to whether the space taken up by the label and the data value can be adjusted. Though it does not show here, the labels and data values are both vertically aligned into two columns. It appears the label column by default takes about 1/3 of the line and the data value column takes about 2/3's of the line. Can this be adjusted so that the label column and the data value column each take 1/2 of the line?
A code excerpt is as follows (lt and gt terminators are omitted):
div class="slds-tile"
div class="slds-tile__detail"
dl class="dl--horizontal slds-text-body--small"
dt class="slds-dl--horizontal__label"
pLifetime Total Fundraising:/p
/dt
dd class="slds-dl--horizontal__detail slds-tile__meta slds-p-bottom--xx-small"
p ui:outputCurrency value="{!v.contact.Lifetime_Total_Fundraising__c}" / /p
/dd