CODEWITHSUNDEEP
extjs
dave
dave

Reputation: 1587

ExtJS IE6 Combox box displays the drop-box down 2 pixels

I have an absolute positioned combo box in my ExtJS screen. All is cool under FF, but IE6 (and 7) show the drop down box a couple of pixels down so it does not line up with the arrow button. I tried wrapping the combo in a positioned div container and took off the x,y from the combo - didn't help.

If I set the style to margin: '-2px' it fixes it for IE but screws it up for FF.

Is this a known problem?

The control looks like this:

screen glitch

Update: This solution below would fix the problem but I chose to use the ExtJs framework's CSS to fix this. The exact CSS I added to fix this was:

.ext-ie .x-form-field-wrap{height:22px;}
.ext-ie .x-form-text{margin:-2px 0;height:18px;}

Some of this may be specific to my app, but the ext-ie stuff seems to plug into the ExtJS framework.

Upvotes: 2

Views: 656

Answers (1)

McStretch
McStretch

Reputation: 20645

If you just need to make a concession for IE (especially 6 and 7) then you can use the underscore hack so that your margin change will only take effect for that browser. Basically all browsers except for IE will ignore any CSS rule with an underscore in front of it.

Example:

combo {
    _margin: 2px;
}

For more info check out Weekly CSS Trick: The IE underscore hack. I wouldn't recommend using this hack liberally, but for a quick fix or two it does the job. If you want to go further than this and create an IE-only stylesheet check out How To Create an IE-Only Stylesheet.

Upvotes: 4

Related Questions