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

Swiper layout remains multiline when disabling grid #7053

Closed
5 of 6 tasks
zvizesna opened this issue Sep 20, 2023 · 1 comment · May be fixed by abhishekbedi/framework7#1, Aarod23/nys-site#1, wierza/Team-project#148 or TaylorBundy/swiper#4
Closed
5 of 6 tasks

Comments

@zvizesna
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/s/swiper-grid-forked-hvsngf?file=/index.html

Bug description

If the number of grid rows dynamically changes from >1 to 1, the swiper layout is not updated correctly.

Possible cause
It seems that the issue may be caused by classes applied to the shadow DOM. When utilizing multiple grid rows, the .swiper element has a .swiper-grid and possibly a .swiper-grid-column class:

<div class="swiper swiper-initialized swiper-horizontal swiper-grid swiper-grid-column swiper-backface-hidden" part="container">

These classes then prescribe styles for the swiper's child element .swiper-wrapper:

.swiper-grid-column > .swiper-wrapper {
    flex-flow: column wrap;
}
.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
}

The problem is that changing the grid rows to 1 doesn't remove these classes.
I noticed there is a special method for changing swiper direction swiper.changeDirection(, which dynamically switches .swiper-horizontaland.swiper-vertical` classes. But I didn't find anything similar for the grid.

Related issue
The documentation for parameter update is a bit misleading, at least for grid.
The described options did not work:

swiperEl.setAttribute("grid-rows", "1");
swiperEl.gridRows = 1;
swiperEl.grid.rows = 1;

Instead, this has worked:

swiperEl.swiper.params.grid = { rows: 1 };
swiperEl.swiper.update();

Expected Behavior

The swiper should look the same as if it was initialized with a grid-row=1 attribute.

Actual Behavior

Please see the reproduction link. The pagination is recalculated correctly and shows dots that correspond to a one-row grid. However, the slides are incorrectly wrapped in multiple lines.

Swiper version

10.2.0

Platform/Target and Browser Versions

Chrome under Windows

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@zvizesna
Copy link
Author

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment