search

yaodingyd / react-flickity-component

A React.js component for using @desandro's Flickity
314 stars 51 forks source link

Items fixed width not being respected #88

Closed guille-alibrate closed 3 years ago

guille-alibrate commented 4 years ago

It all works fine in developer mode. But as soon as we build the project, flickity starts to misbehave. See the capture:

image

So, images overlaps. Sometimes there are blank spaces. In resume, the items fixed width is not being respected.

Any clue about why?

We are using nextJs, btw.

guille-alibrate commented 4 years ago

This is the expected behavior. This is how it looks in dev mode.

image

guille-alibrate commented 4 years ago

Oh, one important thing. It's not about images. If we replace the images with a base64 placeholder it still fails. Also, removing the image ad leaving only text has the same effect. So, no clue on what's going on.

Is there other way to set a fixed width, apart from css? Clearly the math is failing here.

yaodingyd commented 4 years ago

Are you sure the width is incorrect? It looks images are in correct width but their position is wrong. As flickity calculates image positions dynamically, it is possible that the calculation happens at the wrong time.

Can you create a minimal sandbox to reproduce your issue? A demo repo will be perfect.

yaodingyd commented 3 years ago

Will reopen with sandbox.