New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 711055 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Last visit > 30 days ago
Cc:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Large values overlap with total label

Project Member Reported by mattgaunt@chromium.org, Apr 12 2017

Issue description

Chrome Version: (copy from chrome://version)
OS: (e.g. Win7, OSX 10.9.5, etc...)

What steps will reproduce the problem?
(1) Visit https://gauntface.github.io/payment-request-doc-demos/src/
(2) Click on Insane Value button

What is the expected result?
The value and total label to be usable

What happens instead?
value overlaps the total label

Please use labels and text to provide additional information.


For graphics-related bugs, please copy/paste the contents of the about:gpu
page at the end of this report.

 
Screenshot from 2017-04-12 14:42:02.png
18.7 KB View Download
Cc: rouslan@chromium.org anthonyvd@chromium.org
Owner: bbergher@chromium.org
Status: Assigned (was: Untriaged)
+bbergher to advise on what the UI should look like in a case like this. Eliding labels is generally easy, but eliding numerical values is a little weirder.

Please reassign to me afterwards and I can implement what we settle on.
Cc: gogerald@chromium.org
Numerical values should wrap, so the user sees the full value.

+gogerald: Can you explain how you fixed this on Android?
On Android, label and price each take half of the width of the screen. 

In collapsed mode, the label elides at the end to display in a single line (left aligned), the price wraps around to multiple lines without eliding (right aligned).

In expand mode, the label wraps around to at most three lines, then elides at the end if necessary. The price is the same as in collapsed mode.

Expanded mode on desktop has a bit more space than on Android. Use your UX judgement about the maximum number of lines after which to elide.
You can check the screenshots on this bug https://bugs.chromium.org/p/chromium/issues/detail?id=711322
I suspect we could go with a 60/40 or 65/35 split for desktop, instead of 50/50, because the available width is much greater. But the approach should ideally be the same, as Ganggui described.
I think we resolved this one, right?
Owner: anthonyvd@chromium.org
Anthony to verify.
Only partially. We set the labels to multiline but we didn't get to implementing anything smart in terms of where to line break or when to elide yet.
Owner: zkoch@chromium.org

Sign in to add a comment