How can I have WeWeb’s native image slider component inherit the width of the parent container its inserted into? I’ve tried leaving the image slider width to auto or 100% width.
Whenever I insert the image slider into a container, the image slider is WAY too wide and extends far beyond the width of the parent container.
I want my image slider to be 100% width of parent container.
My images are set to auto for height and width.
My parent container is set to inline-flex which is in a grid container that is bound to a collection of products.
I’ve also tried inserting super small images like 20×20px in the image carousel, but the image width in a slide doesn’t seem to have an impact on the overall image slider width.
Yes, when I set a specific pixel width to the parent container it does work. However when using a responsive grid with a set number of columns, you can’t really set a fixed px width…
In regards to setting a max-width on the parent container, yes but the image slider just causes the parent container to grow to that max-width size. So again, you can’t really set a fixed pixel width when using a responsive grid.
I could create a variable that calculates the parent container width on window resize, but seems a little overkill for something that seems like it should be so simple?
After chatting with support, it does sound like it is a weweb bug:
The image slider causes the parent container to grow to become a crazy huge size.
PS: A couple members of StateChange have also experienced this same issue over the past few months and have either implemented workarounds or created their own slider component.
It seems to be the wrapper issue actually. I’ve pinpointed that the element’s wrapper seems to cause this under certain circumstances and one can tweak via the Dev Tools the divs above the element in question. But yeah, definitely a bug. It happens when the element is set to height: 100%, at least in my case and I also used some aspect ratios, which made it grow a lot.
Thanks @Alexy, yes I had tried changing the overflow setting previously, but unfortunately it did not resolve the issue. The slider still grows to be a massive size of 33,554,400x25,165,800 px
Feel free to look at ticket #58TX9B9Os3wLet for a link to my project.
And for what it’s worth, here’s another instance of someone else that is experiencing the same issue:
Sorry for the delay and thanks you for the reference.
After having a look to it, I did the previous fix by putting overflow hidden on your Hit Card element and seems to have fixed your grid, can you confirm ?
For a solution that mantains the ratio of the paddings, I’m actually using a formula to calculate dynamically the parameter that is 0.8 in screenshot. I manually found the min and max ratio and interpolated the other ratios from that (it’s a linear formula).
