Slider is causing an overflow in grid

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!

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?

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

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.

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