Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#11456 closed defect (fixed)

ComboButton & Select vertical alignment issues (IE)

Reported by: bill Owned by: Douglas Hays
Priority: high Milestone: 1.6
Component: Dijit - LnF Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description

On IE, both ComboButton and Select don't vertically align with similar widgets, like Button and FilteringSelect. The problem is because they are based on the <table> for their outer DOMNode.

Button: Button vs. ComboButton, from test_Button.hml

Select: Select vs. Button, from test_Select.html

The button alignment problem is complicated for a number of reasons... IIRC the factors below can affect alignment:

  1. whether or not the buttons are inside a <p> tag or just under <body> (due to a line-height: 1.3em setting for <p>)
  2. font size setting on page
  3. browser zoom setting
  4. etc.

Before, we tried to fix these problems by using vertical-align: baseline rather than vertical-align: middle, but that wasn't sufficient. Seemed like the only way to solve the problem was to modify the templates for ComboButton and Select to have a wrapper <div>.

I'm attaching a test case to be checked in addition to themeTester.html, test_Button.html, and test_Select.html.

Attachments (5)

test_verticalAlign.html (5.4 KB) - added by bill 9 years ago.
additional test case
button.png (7.2 KB) - added by bill 9 years ago.
Button vs. ComboButton?, from test_Button.hml
select.png (7.2 KB) - added by bill 9 years ago.
Select vs. Button, from test_Select.html
11456.patch (9.1 KB) - added by Douglas Hays 9 years ago.
possible patch - needs review
ie6.png (9.5 KB) - added by bill 9 years ago.
IE6 screenshot after patch

Download all attachments as: .zip

Change History (14)

Changed 9 years ago by bill

Attachment: test_verticalAlign.html added

additional test case

Changed 9 years ago by bill

Attachment: button.png added

Button vs. ComboButton?, from test_Button.hml

Changed 9 years ago by bill

Attachment: select.png added

Select vs. Button, from test_Select.html

comment:1 Changed 9 years ago by bill

See also #11008, can probably be closed together.

comment:2 Changed 9 years ago by Douglas Hays

Owner: set to Douglas Hays

Changed 9 years ago by Douglas Hays

Attachment: 11456.patch added

possible patch - needs review

Changed 9 years ago by bill

Attachment: ie6.png added

IE6 screenshot after patch

comment:3 Changed 9 years ago by bill

The patch is definitely an improvement. The one problem I saw is that native controls don't line up with widgets on IE6 (and probably IE7), and on IE8 in quirks mode:

IE6 screenshot after patch

(I added a <select> to the test case.)

Not sure if we can solve that problem or not.

comment:4 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [22707]) Fixes #11456. Set default vertical-alignment to middle for Button widgets, Select, and TextBox? widgets. Add automated test file test_verticalAlign.html.

comment:5 Changed 9 years ago by Douglas Hays

(In [22760]) Refs #11456. ValidationTextBox? was not properly aligned and TextBox_sizes.html:ValidationTextBox test was failing due to an apparent IE6/7 rendering bug associated with vertical-align:middle.

comment:6 Changed 9 years ago by bill

Resolution: fixed
Status: closedreopened

After [22707], Button_mouse.html is failing for me on IE8. When the test does:

dijit.byId("edit").set("label", "hi!");

IE gets an "unknown error". It's from the template change, although not sure why, as it looks OK.

comment:7 Changed 9 years ago by Douglas Hays

Just to document the problem, the test file has Paragraph tags (which cannot contain block level tags as children per W3C) around the Button widget markup. You get away with it until you set a widget's containerNode (block level DIV) innerHTML (via set label) and then IE notes the invalid HTML.

comment:8 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

(In [22767]) Fixes #11456. Replace DIV's with SPAN's in the Button templates so they can be inserted as children of P tags using IE.

comment:9 Changed 9 years ago by bill

(In [22777]) "native" is a reserved word and actually hangs this test on chrome. refs #11456.

Note: See TracTickets for help on using tickets.