Disabled Button Styling

**collinssg** · 24 Jul 2007 4:22 PM

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** · 10 Jan 2008 1:04 PM

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** · 10 Jan 2008 1:10 PM

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

**ssapq** · 10 Jan 2008 1:13 PM

Originally Posted by ssapq

It seems like this may be the bug:
http://jszen.blogspot.com/2005/04/ie...y-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** · 10 Jan 2008 1:14 PM

Is this still an issue with 1.1.1?

**ssapq** · 10 Jan 2008 1:17 PM

Originally Posted by tryanDLS

Is this still an issue with 1.1.1?

Yes, we're using Ext 1.1.1.

**tryanDLS** · 10 Jan 2008 1:35 PM

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

**ssapq** · 10 Jan 2008 1:58 PM

Originally Posted by tryanDLS

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:

Code:

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

to this...

Code:

    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** · 10 Jan 2008 2:06 PM

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** · 10 Jan 2008 2:15 PM

Originally Posted by 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?

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.

Code:

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

Disabled Button Styling

Thread Tools

Search Thread

Display

Disabled Button Styling

Disabled Button Styling