Opened 12 years ago

Closed 12 years ago

Last modified 8 years ago

#4388 closed defect (fixed)

ComboBox down arrows "bleed through" overflow in IE

Reported by: guest Owned by: Douglas Hays
Priority: high Milestone: 1.1
Component: Dijit - Form Version: 0.9
Keywords: Cc: kris@…
Blocked By: Blocking:

Description

We have an app that creates ComboBoxes? programmatically and adds them to dynamically created table cells. The table is contained within a div that has a defined height and overflow set to auto. In IE 6, the down arrows "bleed through" when they overflow the div. I'll attach a simplified example and screenshot. This works fine in FF 2.0.0.6 and I'm pretty sure it worked in IE 6 with 0.9 beta.

Attachments (4)

dojoCombo.html (2.0 KB) - added by guest 12 years ago.
Test case
4388-screenshot.png (80.9 KB) - added by guest 12 years ago.
Screenshot
buttonNode_4388_sfoster_20071015.patch (322 bytes) - added by Sam Foster 12 years ago.
(CLA) (PATCH) patch to tundra.css to give .dj_ie6 .tundra .dijitButtonNode zoom:1 instead of position:relative to trigger hasLayout
dojoForm.html (3.2 KB) - added by guest 12 years ago.
New test page that illustrates clipping issues with multiple widget types

Download all attachments as: .zip

Change History (21)

Changed 12 years ago by guest

Attachment: dojoCombo.html added

Test case

Changed 12 years ago by guest

Attachment: 4388-screenshot.png added

Screenshot

comment:1 Changed 12 years ago by bill

Milestone: 1.1

comment:2 Changed 12 years ago by bill

Owner: set to Sam Foster

comment:3 Changed 12 years ago by guest

Adding this to the test page seemed to make it work:

.dijitDownArrowButton {
    position: static !important;
}

comment:4 Changed 12 years ago by guest

Here's a related forum thread. A comment from Karl suggested mentioning the timeframe we need the fix. Our app ships in February '08, so we'd really like to see this fixed in 1.0.

comment:5 Changed 12 years ago by bill

It's just that that position:static looks scary, like you'll scroll the page and the arrows won't scroll along with it.

comment:6 Changed 12 years ago by guest

I believe this is the culprit (from tundra.css):

.dj_ie6 .tundra .dijitButtonNode {
    position:relative; 
}

If you inspect a combo box with Firebug, you can see that the computed style includes static for position. Here's what the CSS 2.1 spec says about static:

The box is a normal box, laid out according to the normal flow.

comment:7 Changed 12 years ago by bill

Oops, I got confused between "static" and "fixed". But that "position:relative" is there for a reason (IIRC, to stop the bottom of the buttons getting cutoff). This doesn't make the problem recur?

comment:8 Changed 12 years ago by guest

I honestly don't know if using static causes other issues (I haven't noticed any), but now that I see the issue is related to dijitButtonNode, it means that other widgets will also demonstrate the "bleed through". I created a similar example using a bunch of NumberSpinner widgets. Is there a test case demonstrating the need for relative?

comment:9 Changed 12 years ago by bill

Cutoff bug was demonstrated by test_Button.html or test_InlineEditBox.html. See #4037 and #4022.

Changed 12 years ago by Sam Foster

(CLA) (PATCH) patch to tundra.css to give .dj_ie6 .tundra .dijitButtonNode zoom:1 instead of position:relative to trigger hasLayout

comment:10 Changed 12 years ago by Sam Foster

Status: newassigned

comment:11 Changed 12 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [10886]) Fixes #4388: ComboBox? down arrows "bleed through" overflow in IE Patch from Sam Foster (CLA on file)

comment:12 Changed 12 years ago by bill

Milestone: 1.11.0

comment:13 Changed 12 years ago by guest

Resolution: fixed
Status: closedreopened

This doesn't really seem to be fixed in 1.0.1. I'll attach another test page that displays problems with ComboBox?, NumberSpinner?, and ValidationTextBox? uner IE6. TextBox? seems to be handled properly. Obviously, I haven't tried every widget, but it's a bigger problem than just ComboBoxes?.

Changed 12 years ago by guest

Attachment: dojoForm.html added

New test page that illustrates clipping issues with multiple widget types

comment:14 Changed 12 years ago by bill

Milestone: 1.01.1
Owner: changed from Sam Foster to Douglas Hays
Status: reopenednew

Passing to Doug. Sounds like something that needs to be fixed with the conversion from using <table> to just <div>'s with padding, so will have to wait to 1.1.

comment:15 Changed 12 years ago by Douglas Hays

Status: newassigned

comment:16 Changed 12 years ago by Douglas Hays

Resolution: fixed
Status: assignedclosed

(In [11677]) Fixes #4388, #4894, #5148, #5235 in v1.1. Changed the form input widgets from tables to divs to avoid browser incompatibilities with box sizings and nested table issues.

comment:17 Changed 8 years ago by bill

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