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

Tabmenu set as scrollable show forward button when no needed #11415

Closed
Jonnyprof opened this issue Apr 13, 2022 · 0 comments · Fixed by #11591
Closed

Tabmenu set as scrollable show forward button when no needed #11415

Jonnyprof opened this issue Apr 13, 2022 · 0 comments · Fixed by #11591
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@Jonnyprof
Copy link

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-faf8r7-4uc7os

Current behavior
If you have a tabmenu component set as [scrollable]="true" and the menu items fit in the screen, forward button is shown and does nothing when click it.

Expected behavior
Forward and backward buttons should be only shown when necessary.

Minimal reproduction of the problem with instructions
Go to https://github-faf8r7-4uc7os.stackblitz.io. If you visit the page as desktop you see a forward button that does nothing. If you visit the page as mobile device forward button is useful and works correctly.

Possible solution
Call updateButtonState on ngAfterViewInit method.

updateButtonState() {
const content = this.content.nativeElement;
const { scrollLeft, scrollWidth } = content;
const width = DomHandler.getWidth(content);
this.backwardIsDisabled = scrollLeft === 0;
this.forwardIsDisabled = parseInt(scrollLeft) === scrollWidth - width;
}

What is the motivation / use case for changing the behavior?
Useless buttons that confuse the user.

Please tell us about your environment:
Ubuntu 20.04.4 LTS

  • Angular version: 5.X
    13.3.2

  • PrimeNG version: 5.X
    13.3.2

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    All browsers

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    All

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

Successfully merging a pull request may close this issue.

3 participants