Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#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)

tcFilteringSelectMultiRowsIE80.html​ (2.6 KB) - added by Martin Jakobi 11 years ago.
test case
AsOneRowWithStrip.png​ (2.1 KB) - added by Martin Jakobi 11 years ago.
AsOneRow.png​ (1003 bytes) - added by Martin Jakobi 11 years ago.
AsTwoRows.png​ (1.1 KB) - added by Martin Jakobi 11 years ago.

Download all attachments as: .zip

Change History (15)

Changed 11 years ago by Martin Jakobi

Attachment: tcFilteringSelectMultiRowsIE80.html​ added

test case

comment:1 Changed 11 years ago by Douglas Hays

Milestone: tbd → 1.5
Owner: set to Douglas Hays
Status: new → assigned

comment:2 Changed 11 years ago by Douglas Hays

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 Changed 11 years ago by Douglas Hays

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 Changed 11 years ago by bill

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 in reply to:  3 Changed 11 years ago by Martin Jakobi

That was not a description of my best...
I try now to describe the order correctly.

To recreate the defect:

  1. Save the attached testcase into .../dijit/tests/form/
  2. Mark lines 16 to 18 as comment (or remove that)
  3. Load the page in IE8
  4. fun should be selected in the upper FilterSelect?
  5. the FilterSelect? should be displayed as one row
  6. Press F12 to popup the Develope Tools
  7. Change Document Mode to Quirks.
  8. the page auto-reloads
  9. fun should be selected in the upper FilterSelect? but that selection is displayed as a second row
  10. 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:

  1. Save the attached testcase into .../dijit/tests/form/
  2. Load the page in IE8
  3. fun should be selected in the upper FilterSelect?
  4. the FilterSelect? should be displayed as one row
  5. Press F12 to popup the Develope Tools
  6. Change Document Mode to Quirks.
  7. the page auto-reloads
  8. fun should be selected in the upper FilterSelect? and that selection is still displayed in one row
  9. 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:

  1. 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.
  2. You can use the test file ".../dijit/tests/form/test_FilteringSelect.html" instead of my test file and change the css rules manually.

Changed 11 years ago by Martin Jakobi

Attachment: AsOneRowWithStrip.png​ added

Changed 11 years ago by Martin Jakobi

Attachment: AsOneRow.png​ added

Changed 11 years ago by Martin Jakobi

Attachment: AsTwoRows.png​ added

comment:6 in reply to:  4 Changed 11 years ago by Martin Jakobi

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 Changed 11 years ago by bill

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 in reply to:  7 ; Changed 11 years ago by Martin Jakobi

Curious, yes that link works for me.

I try to test with a colleague at office...

comment:9 in reply to:  8 Changed 11 years ago by Martin Jakobi

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 11 years ago by bill

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 10 years ago by bill

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