Closed Bug 1219937 Opened 6 years ago Closed 6 years ago

[RTL] Reset button right-aligned and overlaps input in add/edit contact form

Categories

(Firefox OS Graveyard :: Gaia::Contacts, defect, P2)

ARM
Gonk (Firefox OS)
defect

Tracking

(b2g-v2.5 affected)

RESOLVED FIXED
Tracking Status
b2g-v2.5 --- affected

People

(Reporter: sfoster, Assigned: kaze)

References

Details

(Whiteboard: [2.5-rtl-test-run])

Attachments

(3 files)

In RTL, when entering a phone number for a contact, the (x) reset button overlaps the right edge of the input where you are typing
I poked around in the webIDE, and it looks like with RTL, the input itself is styled by: 

html[dir="rtl"] form p input:focus {
    padding-left: 3rem;
}
html[dir="rtl"] input {
    text-align: right;
}

..but the input and the button are wrapped in a <bdi>. As telephone numbers are LTR, the button is placed on the right. So we need to either move the button outside the <bdi> to agree with the above CSS rules, or use a :-moz-dir(ltr) rule here to override.
(In reply to Sam Foster [:sfoster] from comment #1)
> ..but the input and the button are wrapped in a <bdi>. As telephone numbers
> are LTR, the button is placed on the right. So we need to either move the
> button outside the <bdi> to agree with the above CSS rules, or use a
> :-moz-dir(ltr) rule here to override.

Actually I checked the spec https://mozilla.app.box.com/s/y60s1ngyza9jcltmpaqwfoye4f311n5r, and the 'reset' button should always be on the left in RTL.
Blocks: 1181926
This problem can be reproduced on latest build of Aries KK v2.5 and Flame KK v2.5. 
Actual result: On RTL mode, on new contact created view, the (x) reset button overlaps with the phone number where you are typing.
See attachment: Affected_AriesKK2.5.png
Rate:AriesKKv2.5: 5/5, FlameKKv2.5: 5/5

Device information:
Aries KK v2.5 (Affected)
Build ID               20151110094357
Gaia Revision          07baf613699fa6225359c7f04825c5caeb71d424
Gaia Date              2015-11-09 21:32:50
Gecko Revision         http://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/e14287b00a514a15418dfaa89287030c588ad19d
Gecko Version          44.0a2
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151110.090331
Firmware Date          Tue Nov 10 09:03:39 UTC 2015
Bootloader             s1

Flame KK 2.5 512mb (Affected)
Build ID               20151109004552
Gaia Revision          cf646c52bb947af28329b0a100df91d1b1f2a907
Gaia Date              2015-11-09 02:55:50
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/4eafef5b80f8985c94c4a067f130d37513e1a581
Gecko Version          44.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151109.041411
Firmware Date          Mon Nov  9 04:14:26 EST 2015
Bootloader             L1TC000118D0
QA Whiteboard: [rtl-impact][MGSEI-Triage+]
Whiteboard: [2.5-rtl-test-run]
Priority: -- → P2
Assignee: nobody → kaze
Status: NEW → ASSIGNED
Attachment #8687036 - Flags: review?(borja.bugzilla)
Comment on attachment 8687036 [details] [review]
[gaia] fabi1cazenave:input-areas-bug1219937 > mozilla-b2g:master

Francisco, would you mind stealing the review?
Attachment #8687036 - Flags: review?(borja.bugzilla) → review?(francisco)
Comment on attachment 8687036 [details] [review]
[gaia] fabi1cazenave:input-areas-bug1219937 > mozilla-b2g:master

Sorry for the delay :kaze, I tried on the phone and looks great!

Thanks a lot.
Attachment #8687036 - Flags: review?(francisco) → review+
Landed:

https://github.com/mozilla-b2g/gaia/commit/7c0b1f50c675f4823f842e74bcacd1dfb4afc2c5
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.