Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabview: Forward Button Visible with Fractions #14785

Closed
denny99 opened this issue Feb 12, 2024 · 1 comment
Closed

Tabview: Forward Button Visible with Fractions #14785

denny99 opened this issue Feb 12, 2024 · 1 comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@denny99
Copy link
Contributor

denny99 commented Feb 12, 2024

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 denny99 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 12, 2024
@denny99
Copy link
Contributor Author

denny99 commented Feb 12, 2024

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

@cetincakiroglu cetincakiroglu added this to the 17.8.0 milestone Feb 23, 2024
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Feb 23, 2024
cetincakiroglu added a commit that referenced this issue Feb 23, 2024
fix: #14785 rounded scrollLeft for scaled displays
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants