886409 - [B2G][Settings] The "Unplug USB cable to disable" is truncated in the Storage settings section

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Settings, defect)

Description

[mdaniloff]

Attachment: usb storage overlap

When the user changes the language to Polski, The “Unplug USB cable to disable” text overlaps the “Enable USB cable to disable” enable/disable switch on the Settings Storage Header screen

Repro Steps: 
1. Updated to Leo Mozilla Build ID: 20130621070212
2. Connect the device to the pc via USB cable
3. From the Home screen, navigate to the Settings App
4. Enable the “Enable USB storage” switch under the Storage header
5. Disable the “Enable USB storage” switch under the Storage header

Actual Results:
The “Unplug USB cable to disable” text overlaps the enable/disable switch

Expected Results:
The complete text is displayed with sufficient spacing

Environmental Variables
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/a34f6d62cb05
Gaia: cca61224e6df8e9f7e450d77cb6a8cf91029be64
Platform Version: 18.0

Notes: 
Repro frequency: 100%
See attached: screenshot

Comment 1

[sarsenyev]

Verified it's fixed on Leo V1.1. COM RIL, the text is no longer overlapped but the text is truncated now

Environmental  Variables:
Build ID: 20130801070210
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/aff662053ee8
Gaia: ddb922ed002e88d01f71199da32ff75911b455b2
Platform Version: 18.1
RIL Version: 01.01.00.019.180

Comment 2

[Stefan Plewako [:stef]]

It's worse now and I don't see how I could shorten this string.

Comment 3

[Stephany Wilkes]

Flagging Eric to advise (or reassign accordingly) on layout adjustments since text cannot be truncated.

Comment 4

[Eric Pang [:epang] UX]

Attachment: 20130806_155253_resized.jpg

It looks like the English version uses ellipses, could it be an option for this?  Francis, can I get your thoughts? I was thinking about a couple of options:

1. Increase the vertical space so there's space for another line of text while vertically centering the toggle.

2. Scroll the text in preset parameters.  The text would remain static then every few seconds scroll to reveal the remaining text.

Let me know if you need mock ups created or if you have any other thoughts.

Thanks!

Comment 5

[Francis Djabri [:djabber]]

(In reply to Eric Pang [:epang] from comment #4)
> Created attachment 786301 [details]
> 20130806_155253_resized.jpg
> 
> It looks like the English version uses ellipses, could it be an option for
> this?  Francis, can I get your thoughts? I was thinking about a couple of
> options:
> 
> 1. Increase the vertical space so there's space for another line of text
> while vertically centering the toggle.
> 
> 2. Scroll the text in preset parameters.  The text would remain static then
> every few seconds scroll to reveal the remaining text.
> 
> Let me know if you need mock ups created or if you have any other thoughts.
> 
> Thanks!

I like the sound of option 1 better. Thanks!

Comment 6

[Mila Davydova]

This issue also occurs in English.
 The "Unplug USB cable to disable" appears truncated in the Settings, when user toggles the "Enable USB storage" switch from on to off. (Screenshot is attached)

Asking for UX team input on this issue.

Comment 7

[Mila Davydova]

Attachment: Truncation in English

Comment 8

[Eric Pang [:epang] UX]

Attachment: Settings Subtext Spacing

Mock up of increased vertical space of list items when subtext needs more then one line.  Francis and Sergi, what do you think? If you both think this works, we should add this to the building blocks so bugs like this can be solved with the same fix in the future. Thanks!

Comment 9

[Sergi]

looks fine to me. 

Thanks Eric!

Comment 10

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #9)
> looks fine to me. 
> 
> Thanks Eric!

Is this something we can add to the BB?

Comment 11

[Matthew Vaughan]

Polish text "Odłącz kabel USB, aby wyłączyć" is truncated in the Settings menu (under the Storage section) and in the Media Storage menu within Settings. In the Settings menu, the text displays as "Odłącz kabel USB, aby ...", while in the Media Storage menu it displays as "Odłącz kabel USB, aby wyłą...".

Settings menu: Truncation_Settings.jpg
Media Storage menu: Truncation_StorageManager.jpg

Environmental Variables:
Device: Buri v1.2 comRIL
BuildID: 20131024004000
Gaia: c57951d06f6c9fa5a762d151e4c75214b988679f
Gecko: ed279034d066
Version: 26.0a2
RIL version: 01.02.00.019.082

Comment 12

[Matthew Vaughan]

Attachment: Truncation on settings menu.

Comment 13

[Matthew Vaughan]

Attachment: Truncation on Media Storage menu.

Comment 14

[Matthew Vaughan]

Attachment: Truncation on Media Storage menu.

Comment 16

[Francesco Lodolo [:flod]]

Still happening on 1.4. Any chance to fix this?

Comment 17

[Delphine Lebédel [:delphine - Use needinfo]]

This has been happening over and over from one version to another. I agree it would be nice to fix for 1.4

Comment 18

[Francesco Lodolo [:flod]]

Tried to look into this but I don't see any easy solutions.

The <small> element comes before the actual label in the markup, and it's using "position: absolute" to be displayed below it. That means that, if the element spans on multiple lines, the parent won't resize. 

Not sure that treating this element as an exception, inverting the markup and use "position: relative" makes sense, considering that all other elements (label, checkbox, icon) need to be adjusted.

Comment 19

[BMO Automation]

Firefox OS is not being worked on