#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:
Select:
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 10 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
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:
(I added a <select> to the test case.)
Not sure if we can solve that problem or not.
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