Disabled Button Styling

[collinssg]

The appearance of of the disabled buttons differs between IE and Firefox. See attached image.

Ext version: 1.1RC1
Internet Explorer Version 6.0.2900
Firefox Version 2.0.4

Is it possible to make them the same by default? Also the operation of the buttons in disabled state differs between IE and Firefox. In IE the button is clickable and the text selectable but in Firefox it is not.

I'm not so concerned about this last bit but the button text is very hard to read when disabled in IE.

Thanks,
Simon

[ssapq]

Is there any resolution to this issue? I feel like the disabled style in IE is a bug -- it looks wonky, especially according to our users.

[ssapq]

It seems like this may be the bug:
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

[ssapq]

It seems like this may be the bug:
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

Unfortunately, background-color: transparent; does not fix. Oh well, I'll match the gradient as well as I can. Let me know if anyone else finds a better fix (not involving a visual style change).

[tryanDLS]

Is this still an issue with 1.1.1?

[ssapq]

Is this still an issue with 1.1.1?

Yes, we're using Ext 1.1.1.

[tryanDLS]

Is that a Toolbar button? I don't see this problem with regular buttons. Can you post a small example.

[ssapq]

Is that a Toolbar button? I don't see this problem with regular buttons. Can you post a small example.

If I download Ext 1.1.1, and then edit:
ext-1.1.1/examples/menu/menus.js as such:



tb.add({
cls: 'x-btn-text-icon bmenu', // icon and text class
text:'Button w/ Menu',
menu: menu // assign menu by instance
},


to this...


tb.add({
cls: 'x-btn-text-icon bmenu', // icon and text class
text:'Button w/ Menu',
disabled: true,
menu: menu // assign menu by instance
},


and then view it in IE, the bug exists.

[tryanDLS]

I don't see that issue when making that change or with 'Disabled Item' further down in that menu. It looks the same in both IE6 and FF. Are you sure you don't have some other CSS causing a problem?

[ssapq]

I don't see that issue when making that change or with 'Disabled Item' further down in that menu. It looks the same in both IE6 and FF. Are you sure you don't have some other CSS causing a problem?

I don't understand how I could have any other CSS interfering as I changed 1 line in the example code--which was freshly downloaded. In development we do modify your css slightly, so I purposely grabbed a clean version of ext 1.1.1.

The URL above references the fact that clear type must be enabled in order for this bug to occur. Do you have clear type enabled?

BTW, I'm using IE 6, SP2.

Looking through ext-all.css, I only see 1 style related to *disabled* that has a background color, which isn't relevant to toolbars.

.x-scroller-btn-disabled{cursor:default;background-color:#c3daf9;-moz-opacity:0.3;opacity:.30;filter:alpha(opacity=30);}


So I don't know how the bug could be fixed in ext 1.1.1 unless you know of another way to fix the bug.

[ssapq]

This may be a stretch, but if you're using rdesktop to get to windows it doesn't matter if cleartype is enabled, you'll never see the bug.

[tryanDLS]

Ok I turned on ClearType and I see the problem. I have no idea what the solution to this - perhaps someone else will.

[ssapq]

Sorry, I guess I wasn't explicit about what the fix was--I just gave the URL.

The fix is:


/* fixes an issue where IE munges text when you set an opacity */
div.x-toolbar td.x-item-disabled button.x-btn-text { background-color: #E5E5E5; }


We're using a gray theme, so that color works for us. I assume this could be inserted into each themes css file, depending on the severity of the gradient.

[beng_06]

anyone solved this problem? the text inside the button looks unreadable and i wan to change the color of it. can anyone help me with this?