#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.
The button alignment problem is complicated for a number of reasons... IIRC the factors below can affect alignment:
- whether or not the buttons are inside a <p> tag or just under <body> (due to a line-height: 1.3em setting for <p>)
- font size setting on page
- browser zoom setting
- 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)
Change History (14)
Changed 11 years ago by
Attachment: | test_verticalAlign.html added |
---|
comment:2 Changed 10 years ago by
Owner: | set to Douglas Hays |
---|
comment:3 Changed 10 years ago by
comment:4 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:5 Changed 10 years ago by
(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 10 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
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 10 years ago by
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 10 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
additional test case