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
Closed
Assignees
Labels

Comments

@ErikMy
Copy link

@ErikMy 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
Copy link
Author

@ErikMy ErikMy commented Oct 26, 2015

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

Loading

brandonferrua added a commit that referenced this issue Oct 30, 2015
Changed Picklist assistive-text for arrows
@stefsullrew
Copy link
Member

@stefsullrew stefsullrew commented Nov 4, 2015

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

Loading

@stefsullrew stefsullrew added the bug label Nov 4, 2015
@rickschmoo rickschmoo added this to the 02/16 milestone Feb 4, 2016
@stefsullrew
Copy link
Member

@stefsullrew 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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants