ComboBox down arrows "bleed through" overflow in IE

[guest]

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.

[guest]

Test case

[guest]

Screenshot

[guest]

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

.dijitDownArrowButton {
    position: static !important;
}

[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.

[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.

[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.

[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?

[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?

[bill]

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

[Sam Foster]

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

[bill]

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

[guest]

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?.

[guest]

New test page that illustrates clipping issues with multiple widget types

[bill]

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.

[Douglas Hays]

(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.