Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tile components having a label and a data field mis-align when the label wraps #61

Closed
ErikMy opened this Issue Oct 21, 2015 · 3 comments

Comments

Projects
None yet
4 participants
@ErikMy
Copy link

ErikMy commented Oct 21, 2015

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

@ErikMy

This comment has been minimized.

Copy link
Author

ErikMy commented Oct 26, 2015

Added a screen shot to better illustrate the issue.
label - data fields misalign

brandonferrua added a commit that referenced this issue Oct 30, 2015

Merge pull request #61 from salesforce-ux/picklist-at
Changed Picklist assistive-text for arrows
@stefsullrew

This comment has been minimized.

Copy link
Member

stefsullrew commented Nov 4, 2015

Thank you @ErikatUCI - We'll have a look at it. Sounds like a bug.

@stefsullrew stefsullrew added the bug label Nov 4, 2015

@rickschmoo rickschmoo added this to the 02/16 milestone Feb 4, 2016

@stefsullrew

This comment has been minimized.

Copy link
Member

stefsullrew commented Mar 22, 2016

@ErikatUCI - Sorry for the delay. I should have let you know that this is fixed in our 1.0 release.

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.