Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#11041 closed defect (fixed)

labels on wrong side of CheckBox/RadioButton/TextBox (RTL mode)

Reported by: bill Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit - Form Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description

Labels (or plain text) that come after a CheckBox/RadioButton/TextBox is appearing on the right side of the widget on an RTL page, even though it should appear on the left side.

Expected result (how native checkboxes work): native checkbox

Actual result: dijit checkbox

Attachments (9)

expected.png (8.3 KB) - added by bill 9 years ago.
native checkbox
actual.png (6.7 KB) - added by bill 9 years ago.
dijit checkbox
safari.png (9.1 KB) - added by bill 9 years ago.
failure on safari
ff.png (9.8 KB) - added by bill 9 years ago.
failure on FF
ie7.png (8.4 KB) - added by bill 9 years ago.
failure on IE7
ie8.png (7.9 KB) - added by bill 9 years ago.
failure on IE8
ie6.png (7.8 KB) - added by bill 9 years ago.
failure on IE6
test_flow.html (4.1 KB) - added by bill 9 years ago.
test case w/many settings, for dijits and native controls
arabic.png (12.9 KB) - added by bill 9 years ago.
different runs for english vs. arabic characters

Download all attachments as: .zip

Change History (20)

Changed 9 years ago by bill

Attachment: expected.png added

native checkbox

Changed 9 years ago by bill

Attachment: actual.png added

dijit checkbox

comment:1 Changed 9 years ago by Douglas Hays

Owner: set to Douglas Hays

comment:2 Changed 9 years ago by Douglas Hays

This seems to be a Firefox specific rendering problem.

comment:3 Changed 9 years ago by Douglas Hays

Resolution: wontfix
Status: newclosed

Surrounding both the label and checkbox with a block element seems to fix the problem. I don't see a way to fix this in the widget itself.

<div class="dijitInline">
        <input id="cb" dojoType="dijit.form.CheckBox">
        <label for="cb">label</label>
</div>

Changed 9 years ago by bill

Attachment: safari.png added

failure on safari

Changed 9 years ago by bill

Attachment: ff.png added

failure on FF

Changed 9 years ago by bill

Attachment: ie7.png added

failure on IE7

Changed 9 years ago by bill

Attachment: ie8.png added

failure on IE8

Changed 9 years ago by bill

Attachment: ie6.png added

failure on IE6

comment:4 Changed 9 years ago by bill

This problem is definitely not limited to FF. It happens on every single browser. See attached test_flow.html test case, which has three widgets with three labels:

No image "ie8.html" attached to Ticket #11041

It seems though to just be a general thing when labels are in an LTR script, as I'm getting the same problem with native controls.

Note that it's much worse than the labels being on the wrong side; they are completely disconnected from their associated form control.

comment:5 Changed 9 years ago by bill

Oops, above image should be:

failure on IE8

Changed 9 years ago by bill

Attachment: test_flow.html added

test case w/many settings, for dijits and native controls

Changed 9 years ago by bill

Attachment: arabic.png added

different runs for english vs. arabic characters

comment:6 Changed 9 years ago by bill

I've found that for BIDI purposes, browsers treat our inline widgets (CheckBox, RadioButton, TextBox, etc.) like neutral characters so their flow is affected by the surrounding strongly typed characters. (see http://www.w3.org/International/articles/inline-bidi-markup/)

You can see this in test_CheckBox.html. Duplicating the cb1 example and changing the English label into Arabic affects the position of the CheckBox? relative to it's label:

different runs for english vs. arabic characters

So it seems like our test files aren't broken, they are just confusing for testers, since the so-called RTL mode is still "half LTR", so to speak.

comment:7 Changed 9 years ago by bill

Resolution: wontfix
Status: closedreopened

comment:8 Changed 9 years ago by bill

Owner: changed from Douglas Hays to bill
Status: reopenednew

comment:9 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [22739]) In dir=rtl mode, mark all labels as dir=rtl, even though they are English, so that the text flow of inline widgets (CheckBox, TextBox etc.) works correctly. Fixes #11041.

comment:10 Changed 9 years ago by bill

(In [22748]) Put all of the label text inside of the <label>, so that it appears correctly in RTL mode. Fixes #5381, refs #11041.

comment:11 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.