[RTL] Wrong position for tick icon on scroll list

VERIFIED FIXED

Status

VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: mannai.med.mack, Assigned: mannai.med.mack)

Tracking

({rtl})

unspecified
Dependency tree / graph

Firefox Tracking Flags

(b2g-v2.0 affected, b2g-v2.1 verified)

Details

Attachments

(2 attachments)

(Assignee)

Description

4 years ago
Created attachment 8444109 [details]
tick_right.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:33.0) Gecko/20100101 Firefox/33.0 (Beta/Release)
Build ID: 20140610030202

Steps to reproduce:

Go to Settings > Language > Click the list and select Arabic (Or any other RTL based language)


Actual results:

The tick icon is on the right of the selected element


Expected results:

The tick icon should be on the left, and the text should be aligned to right
(Assignee)

Updated

4 years ago
Keywords: rtl
Blocks: 906270
Status: UNCONFIRMED → NEW
Component: General → Gaia
Ever confirmed: true
(Assignee)

Comment 1

4 years ago
Created attachment 8444119 [details] [diff] [review]
1028701.patch

Here is my patch for this bug, added Vivien to review it.
Attachment #8444119 - Flags: review?(21)
Comment on attachment 8444119 [details] [diff] [review]
1028701.patch

Review of attachment 8444119 [details] [diff] [review]:
-----------------------------------------------------------------

LGTM. Thanks Mack for the patch!
Attachment #8444119 - Flags: review?(21) → review+
Hey Vivien,
There is still room for improvement in this code, e.g.:
- Using *only* background position instead of using the whole repeated code:
> background: transparent url(value_selector/images/icons/checked.png) left 1.2rem top 50% / 2.1rem no-repeat;
- Removing repeated properties that did not change during the transition from LTR to RTL such as margin-left and color
- Most importantly putting the RTL code at the end of the file with the rest of RTL selectors for consistency with every other CSS file we have. :)

I will open a follow up bug for this one and try to get a PR ready,
Thanks! :)
Flags: needinfo?(21)
Assignee: nobody → mannai.med.mack
Depends on: 1030813

Comment 5

4 years ago
Issue is verified fixed on 2.1 flame  

Ticker is in the correct position 


Flame 2.1

Device: Flame 2.1 (319mb)(Kitkat Base)(Shallow Flash)
BuildID: 20141126001202
Gaia: db2e84860f5a7cc334464618c6ea9e92ff82e9dd
Gecko: 211eae88f119
Version: 34.0 (2.1)
Firmware Version: v188-1
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Issue still occurs on the 2.0 flame
adding affected flag till fix can be verified 
Ticker still overlapps words on the right

Flame 2.0

Device: Flame 2.0 (319mb)(Kitkat Base)(Shallow Flash)
Build ID: 20141126000203
Gaia: f9d6e3d83c3922e9399a6c27f5ce4cdd27bdfd05
Gecko: 45112935086f
Version: 32.0 (2.0)
Firmware Version: v188-1
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0
Status: RESOLVED → VERIFIED
QA Whiteboard: [QAnalyst-Triage?]
status-b2g-v2.0: --- → affected
status-b2g-v2.1: --- → verified
Flags: needinfo?(ktucker)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker)
Mass Edit: adding the [rtl-meta]
Whiteboard: [rtl-meta]

Updated

4 years ago
Depends on: 1115087
QA Whiteboard: [QAnalyst-Triage+] → [QAnalyst-Triage+][rtl-impact]
Whiteboard: [rtl-meta]
You need to log in before you can comment on or make changes to this bug.