primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Tabview: Forward Button Visible with Fractions

Open denny99 opened this issue 1 year ago • 1 comments

Describe the bug

For checking if the forward button needs to be displayed, it compares the current scrollstate with the actual width of the content.

The issue is that the scrollWidth is rounded and the scrollLeft Value is not.

In my case the scroll width actually is: 1671.5, but during runtime the value reads 1672. Where as the scroll left value is and stays 150.5.

Environment

MacOS

Reproducer

No response

Angular version

17.1.0

PrimeNG version

17.4.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.x

Browser(s)

Chrome 121

Steps to reproduce the behavior

No response

Expected behavior

updateButtonState(this: TabView): void { const content = this.content!.nativeElement; const {scrollLeft, scrollWidth} = content; const width = DomHandler.getWidth(content); this.backwardIsDisabled = scrollLeft === 0; this.forwardIsDisabled = Math.round(scrollLeft) === scrollWidth - width; }

denny99 avatar Feb 12 '24 08:02 denny99

I could create a PR with the rounded scrollLeft, so it actually matches the rounded scrollWidth

Rounded ScrollWidth: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth?retiredLocale=de

Mentioning the scrollLeft decimal value:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

denny99 avatar Feb 12 '24 08:02 denny99