New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slick not working with CSS grids fr-units (fractions) #2959
Comments
I have this problem too. Can you solve this? |
Confirmed this behaviour with grids. It doesn't seem to be limited to fractional units in particular. When using "auto" width, it sets the slick-track element's style to Check out: https://jsfiddle.net/o8ggsrny/1/ Looks like it's caused by this line in setDimensions: Setting an explicit width for the column fixes the problem. I was able to work around this and still have a responsive design by setting my columns like so: |
For what it's worth, in our Slick setup we've only had this issue on iOS Safari 10, not 11. We've managed to fix it by setting a |
Anyone have an update on how to fix this issue? I'm trying to shove a slick slider inside a css grid that is split into 3 x 33% columns. |
This works fine for me in every browser but Firefox, where I'm having this issue. Slider width is calculated as a bajillion pixels (technical term) wide. |
I had this issue as well, to resolve it I had to apply a fixed width to the Slick container, rather than allowing the grid layout to automatically size it horizontally. |
Same issue here! |
Its failing for me in Chrome 69... Haven't checked other browsers yet... |
Setting minmax(0, 1fr) or overflow: hidden; didn't fix it for me...
|
Bumping this issue is still a thing in 2019 |
Проблема может быть и когда родитель не имеет свойства flex, какой нибудь даже дальний родитель гораздо выше по вложенности. На самом деле display: flex не мешает слайдеру, мешает именно flex-grow: 1; или grid-template: 1fr 1fr; даже если эти свойства стоят гораздо выше по вложенности, например на body. Слайдер берет ширину не там где flexbox или grid layout ее динамически просчитывают. Проблему можно решить только если написать новый слайдер, так как автор данный слайдер уже не поддерживает, а жаль... |
In case it helps someone, I put this codepen together as a proof of concept for a slider we need to implement. https://codepen.io/anon/pen/RdVJPx |
Oh my. Too many js for a simple grid and a simple slider. This is a terrible crutch, but a worker. Probably not dragging him into my project. It's easier for me to set the width in the grid in percent, then it works fine |
See #3415, this issue is not related to Slick, it's the expected behavior of |
|
This trick does not help for height if the slider is vertical. grid-template-rows: minmax (0, 1fr); also tried ( |
You mean, slick.js is in |
There seems to have been a change in Chrome 80 so this now applies in more cases than it did previously. |
yes, after one of the latest updates even if one of parent containers has fixed width it not helps. Required to be not "fr" width of column |
Worked great for me! 🎉 |
Worked great for me. |
in case of auto this also works: |
best solved: |
When using fr-units within css grid, Slick can't determine the width properly. Instead correct width, it makes it huge.
====================================================================
Here's the bug in action:
https://codepen.io/virmasalo/pen/XgVzrM
====================================================================
Steps to reproduce the problem
====================================================================
What is the expected behaviour?
Work like it does with px or other typical units.
====================================================================
What is observed behaviour?
Slick can't calculate the width properly, but instead gives a huge value for it.
====================================================================
More Details
The text was updated successfully, but these errors were encountered: