Unplanned
Last Updated: 02 May 2023 12:40 by ADMIN
Mike
Created on: 25 Apr 2023 22:23
Category: Kendo UI for jQuery
Type: Bug Report
0
TabStrip scroll right arrow not disabled when browser is zoomed

When the browser is zoomed, the TabStrip scroll right arrow does not change to disabled when there are no more tabs to scroll into view. 

It looks like the problem is in kendo.tabstrip.js _toggleScrollButtons function, the following line:

that._scrollNextButton.toggleClass('k-disabled', scrollLeft === ul[0].scrollWidth - ul[0].offsetWidth);

When the browser is zoomed, kendo.scrollLeft(ul) returns a decimal value.  https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft has the warning: "On systems using display scaling, scrollLeft may give you a decimal value."

scrollWidth and offsetWidth are rounded to integer.

My workaround is to override the _toggleScrollButtons function and do the following:

that._scrollNextButton.toggleClass('k-disabled', Math.abs(scrollLeft - (ul[0].scrollWidth - ul[0].offsetWidth)) <= 1);

1 comment
ADMIN
Neli
Posted on: 02 May 2023 12:40

Hi Mike,

Thank you very much for reporting the issue and also for the provided workaround.

As we extensively tested on different screens it appeared that the issue can be replicated also on browser zoom 100%, but it is not consistent. On some screens with browser zoom 100% it appears, on some not.  Also, it seems that it depends on the browser as it appears in Chrome and Edge, but not in Firefox. Thank you very much for the provided the suggested workaround as it seems to resolve the issue, thus I added it to the related item in GitHub

As a small token of gratitude for reporting the issue, I have increased your Telerik points.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.