search

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions
https://swiperjs.com
MIT License
39.59k stars 9.75k forks source link

Does not work with fr units using grid layout #2606

Closed alexbudure closed 6 years ago

alexbudure commented 6 years ago

This is a (multiple allowed):

What you did

Tried to place the slider in a container that has the sizing 1fr from grid.

Expected Behavior

The slider should use the intrinsic sizing of 1fr and fit accordingly.

Actual Behavior

The slider extends the width of the container and does not care for the size 1fr. I can get it working doing grid-template-columns: calc(100% - 300px) 300px; but that defeats the whole purpose of 1fr and gets really messy when you start to have grid gaps.

nolimits4web commented 6 years ago

How is it related to Swiper itself? Looks like generic CSS issues. Swiper must have some fixed size or size that can be calculated to limit the inner wrapper element size

alexbudure commented 6 years ago

Flickity knows how to handle this, why can’t swiper also know?

So you’re saying let’s not use swiper and CSS grid at the same time? That doesn’t sound like a proper solution considering more and more use the grid layout 😕

jonnitto commented 5 years ago

Please reopen this issue, as this a serious bug

thamas commented 5 years ago

Found a way to make it work(?): https://codepen.io/thamas/pen/JwoQPq

acespace90 commented 5 years ago

Same trouble for me using fr units with css grid.

michaelpumo commented 5 years ago

I have a swiper inside a CSS grid column with an fr based width. This causes swiper to become huge and fill the entire screen. If I change the fr to a fixed width like 500px then the problem goes away.

Can swiper not calculate the width of the container it's sitting in with fr?