View Full Version : "mini-left" collapsible handle image not appearing in IE6

18 Aug 2008, 6:26 AM
Hi there-

I have upgraded to ExtJS 2.2, and noticed that the image mini-left which appears on a collapsible split panel shows as expected in Firefox, but does not display in IE6. Has anyone seen this, or know of a way I can get the handle back?

I am using a border layout, and in the "mini" mode, so the handle appears center of the split bar.

Thanks for any help.

18 Aug 2008, 6:30 AM
I just noticed that it is not only the mini-left, but whenever a panel is open, the icon/handle to collapse the panel (whether it be a north/south/east/west) does not display. The functionality works, and as soon as the panel is collapsed on IE6, the expanding handle shows, but the collapse handle does not.

18 Aug 2008, 6:40 AM
I just tested the layout examples with IE6 (and set collapseMode to 'mini'), but all icons display correctly.

Are you sure you also upgraded the images and stylesheets?
And is Ext.BLANK_IMAGE_URL set correct?

18 Aug 2008, 6:56 AM
Your response may have just triggered the answer. I had upgraded everything, but I am using the xtheme-slickness theme, which I think the error lies within.

Thanks for the help.

18 Aug 2008, 7:03 AM
Sorry, I mispoke. When removing the slickness theme the problem still exists.

I have the Ext.BLANK_IMAGE_URL set to s.gif that I host locally. I upgraded the entire extJS library (including styles/images), and the weird thing is that it works as expected in Firefox...it is only an IE6 issue.

Talk soon

18 Aug 2008, 7:07 AM
Could you post example code (since I'm not able to reproduce the problem)?

18 Aug 2008, 7:20 AM
Sure...here is a window that I open which has a border layout...when the regions are expanded, no handle exists to collapse, but on collapse, the handle shows. I've also included screen shots of what I see. To debug, I even set the bgcolor of the split to red, to see if that shows. Again, on Firefox, I see a red bg in all splits, in IE6, no red.

.x-layout-split{background-color:#ff0000; !important}

EntryWin = new Ext.Window({
id: 'EntryWindow',
width: 800,
y: 100,
animateTarget: null,
shim: false,
shadow: true,
hideBorders: true,
title: 'Entry...',
height: 600,
autoScroll: false,
closeAction: 'hide',
closable: true,
maximizable: true,
layout: 'border',
plain: true,
items: [
region: 'west',
layout: 'fit',
id: 'EntryWestRgn',
width: 480,
minWidth: 480,
collapsible: true,
collapseMode: 'mini',
split: true
region: 'center',
layout: 'fit',
id: 'EntryPanelCnt'
region: 'south',
layout: 'fit',
html: "  " + securitiesLegalNote,
split: true,
minHeight: 16
buttons: [

text: 'Cancel',
handler: function() {
trackEvent("Close Entry Window", "Entry Window", debugLevel['HIGH']);

18 Aug 2008, 7:34 AM
Ext 2.2 adds the following CSS rule:

.ext-strict .ext-ie6 .x-layout-split{background-color:#fff!important;filter:alpha(opacity=1);}

This means that any background color won't be visible.

18 Aug 2008, 7:48 AM
Hi there-

That is the line...I just removed that from the ext-all.css, and all works as it did before on IE6.

Thanks for the heads up. Curious what that line is for though...looks like an ie6 hack, but caused the issue.

Thanks again!

Talk soon

18 Aug 2008, 7:51 AM
In Ext 2.1 you couldn't drag a splitter if the background color wasn't set in IE6 strict mode.

This CSS sets a background color, but also a transparency, so the displayed color would still be the underlying color.

Your problem is probably that the underlying color and the panel color are the same, so you don't see the difference.

18 Aug 2008, 8:18 AM
Excellent...thanks again!

26 Aug 2008, 10:24 AM
I have the same problem as crpatrick. In 2.2, my splitter handle on a collapsible mini doesn't render. But Condor, your explanation doesn't fully make sense. The CSS that you showed could explain the background color issue, but why isn't the sprite appearing?

Nothing in the background-color or filter CSS edits should cause that to disappear.

I guess for now, I'll take crpatrick's approach and comment out that line in the base CSS file for 2.2. But it still seems like a bug to me.

26 Aug 2008, 10:50 AM
After looking at this some more, now I understand why the sprite doesn't show up. By using any color with an opacity filter value of 1, IE6 is basically coloring the whole splitter handle black, including the sprite (i.e. an opacity of 1 is only allowing 1% of the background to come through, essentially creating a dark stripe). Change the opacity to 100 and you'll see that the sprite returns.

I'm not sure what the right fix here is, but the one included by default in Ext 2.2 isn't it. For my app, I just added the CSS line that Condor posted earlier to my own stylesheet. Then I was able to change the background to the color it was supposed to be and set the opacity to 100 to override the Ext default.

27 Oct 2008, 3:51 AM
After making the opacity 100, the splitter bar background shows as white! I have the following options with me:

Change the background color
I can change the background color value to match the default blue theme, but if I change the theme, the splitter bar will remain blue.
Now, I must make this change in the CSS of every theme file to match the splitter background with that theme.
I can do it but I prefer not to specify the background color for every theme and it should be picked up correctly by parent CSS rules.

Comment out the CSS rule in ExtJS 2.2
Commenting out the CSS rule pointed out by Condor, indeed makes the splitter bar non-draggable.

So, what's the correct solution here?

27 Oct 2008, 4:16 AM
If you are using a custom theme with a specific splitter color (that is not equal to the background color) you need:

.ext-strict .ext-ie6 .x-layout-split{background-color:#abc!important;filter:none;}

(where #abc is the color you want for the splitter)