Image only toolbar button not grayed out when disabled

[James]

Hi 

In the latest release 2018.1.221 the behaviour  of disabled image only toolbar buttons seems to have changed? Previously they were grayed out and now they are not...

If I add text to the button this does get grayed out but not the image.

I have attached two .png files toolbar1.png showing previous behaviour and toolbar2.png showing current behaviour .....

Any suggestions on how to get the images to show as disabled?

Thanks

James

[Ivan Danchev]

Hello James,

At my end the image in a disabled ToolBar button with no text is grayed out (screenshot). See this dojo example. The first button is enabled and has image and text, the second has image and text and is disabled, the third is enabled and has only image, the fourth is disabled and has only image. 
Could you modify the linked example and demonstrate the issue?

Regards,
Ivan Danchev
Progress Telerik

[James]

Hi Ivan

Thanks for the quick response. I think you may well be right - after posting yesterday I made an example similar to yours and it did indeed look disabled - I used the same images. I think the issue was maybe a change to the opacity with colour images .... are there any colour images in 'demos.telerik.com/kendo-ui/content/shared/icons' that I could access touse in a test?

Disabled buttons in our toolbar are disabled, it was only the appearance that seemed to have changed.

 

Thanks again

James

 

[Ivan Danchev]

Hi James,

Here's the dojo example updated with a colored image set to the ToolBar buttons. There is no change in behavior.

Regards,
Ivan Danchev
Progress Telerik

[James]

Hi Ivan Thanks for that - however if you run your example against  version 2016.3.1028 -  dojo example you will see that the images are 'grayed' out a bit more.

While what we have now in 2018.1.221 are ok is there any change we can make to get the toolbar to look a bit more like the pre 2017 R3 versions?

Kind regards
Jim

[Ivan Danchev]

Hi James,

Indeed the disabled buttons in the older version were more grayed out and this was due to the opacity value applied to the k-state-disabled class:

.k-button-group .k-state-disabled {
  opacity: .3;
}

Here's the modified example with the CSS rule above added and the latest official Kendo UI version loaded.

Regards,
Ivan Danchev
Progress Telerik

[James]

Hi Ivan

That is exactly what we needed.

Many thanks 

Kind regards

James

[Ivan Danchev]

Hi James,

Thank you for writing back. I am glad the suggested styles helped you in achieving the desired button appearance.

Regards,
Ivan Danchev
Progress Telerik