Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#11142 closed defect (fixed)

[patch][ccla]TextBox rendering problems in IE

Reported by: Douglas Hays Owned by: Douglas Hays
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.5.0b2
Keywords: Cc:
Blocked By: Blocking:

Description

Run test_ComboBox.html in strict mode + IE7. You'll see that the down arrow icon is too low in the first widget.
Run the test in quirks mode + IE7 and you'll see the icon centered but the text is too high in the textbox.
Now run test_Spinner.html in quirks mode + IE6/7. In the 2nd widget with 200% font, type something invalid and the Spinner gets bigger.

Attachments (2)

11142.patch (9.3 KB) - added by Douglas Hays 10 years ago.
jiggled IE CSS rules to get TextBox? widgets to look right - needs review
11142_newSpinner.patch (43.8 KB) - added by Douglas Hays 10 years ago.
new Spinner template + new test file

Download all attachments as: .zip

Change History (12)

comment:1 Changed 10 years ago by Douglas Hays

Summary: TextBox rendering problems in IE[patch][ccla]TextBox rendering problems in IE

Changed 10 years ago by Douglas Hays

Attachment: 11142.patch added

jiggled IE CSS rules to get TextBox? widgets to look right - needs review

comment:2 Changed 10 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [22155]) Fixes #11142. Change IE-specific CSS so that TextBox? widgets render correctly. Enhance TextBox_sizes.html to include ability to change styles dynamically.

comment:3 Changed 10 years ago by Douglas Hays

(In [22156]) References #11142. Fix a couple more Spinner CSS issues in IE quirks mode.

comment:4 Changed 10 years ago by Douglas Hays

(In [22157]) References #11142. Fix 1 more claro/Spinner/IE quirks CSS problem.

comment:5 Changed 10 years ago by Douglas Hays

(In [22158]) References #11142. claro Spinner test in Textbox_sizes was missing some CSS. Cleaned up some odd css syntax/rules.

comment:6 Changed 10 years ago by Douglas Hays

Resolution: fixed
Status: closedreopened

Need to investigate
dijit/tests/form/TextBox_sizes.html?theme=claro&fontsize=21px&family=system
which is failing in IE6.

Changed 10 years ago by Douglas Hays

Attachment: 11142_newSpinner.patch added

new Spinner template + new test file

comment:7 Changed 10 years ago by Douglas Hays

bill, please review the latest patch. I removed 2 nodes from the Spinner template and added zoom function for all browsers for the Spinner arrows. I created a massive TextBox_sizes.js test file (varying fonts and themes and direction and padding) and ran it on IE65/7/8, FF 3.6, Safari 4, and Chrome 4, and strict and quirks mode and all tests pass for me. But no doubt you'll find something that doesn't work.

comment:8 Changed 10 years ago by bill

It looks pretty good to me.

I noticed just one big problem in themeTester.html, that DropDownButton, ComboButton, !Select [etc.] are showing both the arrow icon and the a11y text equivalent. The issue is that for Spinner you've brought back the design from the old days where the arrow character is embedded in the icon <div> but that's not how the other widgets work anymore.

Also, a few a11y things:

  • FF3.6 test_Spinner.html?a11y=true, the arrows are half cutoff, especially on high zoom levels. Also happens with dir=rtl.
  • FF3.6 test_Spinner.html?theme=claro&a11y=true, the line between the arrows is lost

comment:9 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

(In [22185]) Fixes #11142 !strict. Changed Spinner (and associated CSS) to use scale/zoom(0.5) INPUTs for the arrows.

comment:10 Changed 9 years ago by bill

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