Completed
Last Updated: 03 Jan 2023 08:23 by ADMIN
Release R1.2023-Increment.3(18.Jan.2023)
Stephen
Created on: 17 Nov 2022 19:20
Category: Toolbar
Type: Bug Report
0
ToolBar in TabStrip: disabled buttons are invisible

Hello,

In 2022.3.1109(but starting in 2022.1.119) using the Bootstrap v3 theme(not sure about any of the others), when you have a ToolBar inside a TabStrip, disabled buttons are invisible instead of greyed-out.

A demonstration can be found here: https://dojo.telerik.com/@Stephen/ESuKUqAD

It is due to the opacity being set incorrectly to 0 due to changes in the CSS rules, specifically there is a now a ".k-tabstrip .k-button.k-disabled" rule that has a higher specificity than the "old" rules.

Current/broken rules:

The rules in the last version it worked(2021.3.1207):

 

While I'm sure I can figure out a workaround, an official workaround/fix would probably be better.

 

Thanks.

1 comment
ADMIN
Martin
Posted on: 18 Nov 2022 15:27

Hello, Stephen,

Thank you for reporting the behaviour.

I am converting this thread to a bug report in our Feedback Portal where you can track its status. A fix will probably be available in the next release.

As a workaround, you can either use the code snippet below, or use a SASS based theme, as the bug only reproduces with LESS themes:

click: function() {
              //let toolbar = $("#toolbar").getKendoToolBar();
              enabled = !enabled;
              //toolbar.enable($("#button"), enabled);
              $("#button").attr("disabled", enabled ? false : true);
            }

As a small token of gratitude for reporting the bug, I am updating your Telerik Points.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.