Disabled button is a gray area only in IE8

If I run a webix application in IE8, a disabled button is shown as a gray area only, the button text is invisible and the button area is larger than the size of an enabled button. How can I fix this?

To fix the issue - add the next css style to the page

.webix_view > .webix_disabled{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

It will be included in the next buid as part of webix.css

Thank you very much for the quick reply. It works fine. But there is still an issue with the size of that area.

I have have reduced the button height by applying the property inputHeight:25. The button is rendered with the new height but the disable area has still the default height of buttons.

So I have added following css:

.webix_view > .webix_disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
height:25px;
}

That works but is not really beautiful.

Sorry, I have missed this part. One more css style will help

.webix_view.webix_control > .webix_disabled{
     background-color: transparent;
}

Also, can you please share a snippet where you was need to use “inputHeight”, normally it must be enough to use the default “height” property, which must work for any element.

The “height” property doesn’t work for button so I tried “inputHeight”, which finally adjusted the button height (at least in my script; tried also css property with no effect) .

The css style

      .webix_view.webix_control > .webix_disabled{
           background-color: transparent;
      }

is dangerous, it enables the button (makes it click-able)!!

Please try to use webix.css from the latest build - https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/QIN5WV55xRyFso9/webix.zip

It must fix issue in IE8 without unnecessary side effects.

No improvement with the latest build. I checked it with FF26 and IE8: button property “height” has no effect. But one can achieve a comparable result if the button is placed into a dedicated div with the desired height.