Slider is causing an overflow in grid

Finsweet Components Slider
,
1

Hey everyone,

I think there might be a bug with the Finsweet slider. When you place it inside a grid, it causes an overflow that makes the page grow.

On desktop, setting the column to max 1fr / min 200px works fine, but if it’s just 1fr, it breaks the page layout. On mobile, this doesn’t solve the issue either—there needs to be a flex div, otherwise, there’s still an overflow.

Can anyone confirm this?

Thanks!

2

Hey @barish! this is the first report I’ve heard on this. Could you share a link so I can check and report the bug if needed?

3

https://preview.webflow.com/preview/swiper-finsweet?utm_medium=preview_link&utm_source=designer&utm_content=swiper-finsweet&preview=8a7ded1edc479699f0f30ecf07540be5&workflow=preview

4

I’ve also gotten this. Whenever the next or prev button are pressed, overflow happens during the animation, then disappears after. Very annoying because it shifts the entire element up and down.

5

Hey @barish @Chad!

This is an issue with the page’s overall layout rather than an issue with Components. Specifically, the element that wraps the slider.

I have recreated the setup here → Growing slider

The right column for the grid is styled like this for both sliders

.grid-right{
  justify-content: center;
  align-items: center;
  display: flex;
}

However, the top setup has a combo class setting these minimum values

.grid-right.set-min {
  min-width: 0;
  min-height: 0;
}

The slider below does not have the combo class and we can see.

We will document all of this, thanks for pointing it out :pray:

1 Like