#11117 closed defect (worksforme)
dijit.form.FilteringSelect displays the value as multi-row if using ie quirks mode
Reported by: | Martin Jakobi | Owned by: | Douglas Hays |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | Dijit - Form | Version: | 1.5.0b2 |
Keywords: | css dijit FilteringSelect ie quirks | Cc: | |
Blocked By: | Blocking: |
Description
A dijit.form.FilteringSelect?'s value is displayed as multi-rows under the following circumstances:
- using an IE8: all browser modes with document mode quirks
- the FileringSelect? property hasDownArrow is "true"
I believe this is caused by the following setting: ../dojo/dijit/thems/dijit.css, line 399:
.dijitInputInner { /* for when an <input> is embedded inside an inline-block <div> with a size and border */ border:0 !important; vertical-align:middle !important; background-color:transparent !important; 399: width:100% !important; /* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
using
width:auto !important;
instead the value is displayed as one row, but a small range is kept at the bottom of the down arrow.
This small range disappears with changing the line range 422 - 426 (../dojo/dijit/thems/dijit.css): from:
.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, .dj_iequirks .dijitError INPUT.dijitValidationInner, .dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner { height: 100% !important; /* 100% and not auto needed for IE+quirks */ }
to:
.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, .dj_iequirks .dijitError INPUT.dijitValidationInner { height: 100% !important; /* 100% and not auto needed for IE+quirks */ }
The test file shows the workaround for the first part as a local style. Comment out line 17 to see the difference. (For the 2nd part there is no local style, yet)
Attachments (4)
Change History (15)
Changed 12 years ago by
Attachment: | tcFilteringSelectMultiRowsIE80.html added |
---|
comment:1 Changed 12 years ago by
Milestone: | tbd → 1.5 |
---|---|
Owner: | set to Douglas Hays |
Status: | new → assigned |
comment:2 Changed 12 years ago by
I'm confused on how to recreate this. Here are my steps:
1) Save the attached testcase (which includes a strict DOCTYPE AND a width:auto patched STYLE tag into trunk/dijit/tests/form/.
2) Load the page in IE8 (default is IE8 standards mode).
3) Press F12 to popup the Developer Tools and then changed Document Mode to Quirks (the page auto-reloads).
4) Focus either textbox and just hold down the m key on the keyboard, then the box exapdns to 2 lines.
5) Edit the testcase and REMOVE width:auto !important.
6) Reload testcase in IE8/quirks.
7) Textbox no longer expands to 2 lines.
8) Reedit and add width:auto !important back.
9) Reload testcase and notice that it expands again.
comment:3 follow-up: 5 Changed 12 years ago by
Resolution: | → worksforme |
---|---|
Status: | assigned → closed |
Maybe the user's cache was not being cleared. I have my Temporary Internet Files seeting to check for newer versions of stored pages every time I visit the webpage. Please reopen if the recreate steps can be clarified.
comment:4 follow-up: 6 Changed 12 years ago by
FYI, I can't reproduce the problem either. After editing the test file to remove the added CSS and the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
, it works fine for me in both IE8 and IE8/IE7 compat mode.
comment:5 Changed 12 years ago by
That was not a description of my best...
I try now to describe the order correctly.
To recreate the defect:
- Save the attached testcase into .../dijit/tests/form/
- Mark lines 16 to 18 as comment (or remove that)
- Load the page in IE8
- fun should be selected in the upper FilterSelect?
- the FilterSelect? should be displayed as one row
- Press F12 to popup the Develope Tools
- Change Document Mode to Quirks.
- the page auto-reloads
- fun should be selected in the upper FilterSelect? but that selection is displayed as a second row
- That defect is shown as image
Tracking this behaviour down I found as defect source the css rule .dijitInputInner (../../../dijit/themes/dijit.css).
To illustrate that I inserted the patch (lines 16 to 18) into the testcase.
So, to see the patched testcase:
- Save the attached testcase into .../dijit/tests/form/
- Load the page in IE8
- fun should be selected in the upper FilterSelect?
- the FilterSelect? should be displayed as one row
- Press F12 to popup the Develope Tools
- Change Document Mode to Quirks.
- the page auto-reloads
- fun should be selected in the upper FilterSelect? and that selection is still displayed in one row
- The patched version is shown as image
---
That patched version still has a (new) defect. See the small strip below the down arrow (see .
And tracking that 2nd behaviour down I found as defect source the css rule ".dijit_a11y .dijitComboBox .dijitArrowButtonContainer" (../../../dijit/themes/dijit.css, line 455).
Removing that css rule the strip disappeared.
Some more annotations:
- I clear the browser's cache prior to any loading and use the IE setting "Check for newer versions of stored pages: Every time I visit the webpage". So, I think there are no side effects from that.
- You can use the test file ".../dijit/tests/form/test_FilteringSelect.html" instead of my test file and change the css rules manually.
Changed 12 years ago by
Attachment: | AsOneRowWithStrip.png added |
---|
Changed 12 years ago by
Attachment: | AsOneRow.png added |
---|
Changed 12 years ago by
Attachment: | AsTwoRows.png added |
---|
comment:6 Changed 12 years ago by
I think the DOCTYPE doesn't matter. I've used strict and transitional each with the same behaviour.
I believe in dojo.verion and that is: LOG: 1.5.0b2 (22095)
comment:7 follow-up: 8 Changed 12 years ago by
I tried your test case again according to your instructions and it's working fine for me, see http://bill.dojotoolkit.org/trunk/tcFilteringSelectMultiRowsIE80.html. Does that link work for you?
comment:8 follow-up: 9 Changed 12 years ago by
Curious, yes that link works for me.
I try to test with a colleague at office...
comment:9 Changed 12 years ago by
FYI, after some browser restarts your link shows "two rows" in document mode "quirks", too.
Testing your link from a colleague's machine works well for all document modes.
comment:10 Changed 12 years ago by
OK, try to find out what's different about your machine that's making it fail there. Maybe you have some different IE setting like zoom.
comment:11 Changed 11 years ago by
Component: | Dijit → Dijit - Form |
---|
test case