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

Galleria: thumbnail items doesn't work properly when responsive options are set #9744

Closed
Jonnyprof opened this issue Jan 11, 2021 · 2 comments
Assignees
Labels
LTS-FIXED-9.2.5 Fixed in PrimeNG LTS 9.2.5 LTS-FIXED-10.1.0 Fixed in PrimeNG LTS 10.1.0 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://www.primefaces.org/primeng/showcase/#/galleria

Current behavior
If you have responsive options, the thumbnail panel doesn't show the selected image when navigating, hides thumbnails and you are not able to navigate to all images.

Expected behavior
Thumbnail navigation should show the selected image and be able to navigate to all images.

Minimal reproduction of the problem with instructions

  • Go to galleria page and set mobile resolution. Refresh page.
  • Navigate the photos with thumbnail arrows and will see thumbnails are not shown as expected.

When you have responsive options, it takes global numVisible and not responsiveOptions numVisible because of calculatePosition() doesn't have set itemsContainer at first.

calculatePosition() {
if (this.itemsContainer && this.sortedResponsiveOptions) {
let windowWidth = window.innerWidth;

If you resize window, it works as expected because it runs calculatePosition function.

One ugly workaround should be fire manually resize event after component is rendered:

window.dispatchEvent(new Event('resize'));

It forces to go to calculatePosition() and set the correct d_numVisible variable according with responsiveOptions.

  • Angular version: 5.X
    9.0 but is failing in all versions (the code is the same)

  • PrimeNG version: 5.X
    9.0 but is failing in all versions (the code is the same)

  • 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 ]
    Tested in Firefox 84.0.2 and chrome 87.0.4280.66, but I think that affect all browsers

@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Jan 12, 2021
@yigitfindikli yigitfindikli added this to the 11.2.0 milestone Jan 12, 2021
@yigitfindikli yigitfindikli self-assigned this Jan 12, 2021
@yigitfindikli yigitfindikli modified the milestones: 11.2.0, 11.3.0 Jan 21, 2021
@yigitfindikli yigitfindikli added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Mar 2, 2021
@Jonnyprof
Copy link
Author

I've tested it in your gallery showcase and still not working

@yigitfindikli
Copy link
Contributor

Hi @Jonnyprof,

Thanks for the feedback fixed now.

@yigitfindikli yigitfindikli added LTS-FIXED-9.2.5 Fixed in PrimeNG LTS 9.2.5 and removed LTS-PORTABLE labels Mar 16, 2021
yigitfindikli added a commit that referenced this issue Mar 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-FIXED-9.2.5 Fixed in PrimeNG LTS 9.2.5 LTS-FIXED-10.1.0 Fixed in PrimeNG LTS 10.1.0 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