Slick not working with CSS grids fr-units (fractions)

[svirmasalo]

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

1. Create slick using css grid and px -units
2. Change px-units to fr-units

====================================================================

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

• Firefox latest
• Latest jQuery & Slick

[alexd73]

I have this problem too. Can you solve this?

[hackel]

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 width: 2.32644e+8px; transform: translate3d(-7.15828e+7px, 0px, 0px); Looks like it's trying to do some kind of javascript magic that doesn't take grids into account.

Check out: https://jsfiddle.net/o8ggsrny/1/

Looks like it's caused by this line in setDimensions: _.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));

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: grid-template-columns: minmax(100px, min-content) calc(100vw - 463px);

[sephie]

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 width: 100vw value on the .slick-list element.

[Coop920]

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.

[amberweinberg]

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.

[apcro]

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.

[samuel-clara]

Same issue here!

[mikkelwf]

Its failing for me in Chrome 69... Haven't checked other browsers yet...

[JJGerrish]

@Coop920 I had the same layout and adding overflow: hidden; to the grid item containing the slick slider fixed this for me as found here: #3415

Hopefully this helps some people with the same issue while we wait for a fix!

[mdominguez]

Setting minmax(0, 1fr) or overflow: hidden; didn't fix it for me... What did the trick was to trigger a window resize in the slider's init callback so slick recalculate's the correct width.

var $featuredNewsItemsList = $(this).find('.js-c-news-items__list');
$featuredNewsItemsList.on('init', function(event, slick, currentSlide, nextSlide) { 
     $(window).trigger('resize');
});
$featuredNewsItemsList.slick({
     //settings
});

[rdeeb]

Bumping this issue is still a thing in 2019

[KimonoVIP]

Проблема может быть и когда родитель не имеет свойства flex, какой нибудь даже дальний родитель гораздо выше по вложенности. На самом деле display: flex не мешает слайдеру, мешает именно flex-grow: 1; или grid-template: 1fr 1fr; даже если эти свойства стоят гораздо выше по вложенности, например на body. Слайдер берет ширину не там где flexbox или grid layout ее динамически просчитывают. Проблему можно решить только если написать новый слайдер, так как автор данный слайдер уже не поддерживает, а жаль...

[sjcallender]

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

Here's the design:

[KimonoVIP]

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

Here's the design:

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

[enguerranws]

See #3415, this issue is not related to Slick, it's the expected behavior of fr units. Use minmax(0, 1fr); to allow your grid items to shrink.

[KimonoVIP]

See #3415, this issue is not related to Slick, it's the expected behavior of fr units. Use minmax(0, 1fr); to allow your grid items to shrink. Thanks^ it's work!) Need this write in documentation)

[KimonoVIP]

@enguerranws

See #3415, this issue is not related to Slick, it's the expected behavior of fr units. Use minmax(0, 1fr); to allow your grid items to shrink.

This trick does not help for height if the slider is vertical. grid-template-rows: minmax (0, 1fr); also tried (

[enguerranws]

You mean, slick.js is in { vertical: true, verticalSwipe: true }? See: https://codepen.io/enguerranws/pen/dLNGQE

[BenSpace48]

There seems to have been a change in Chrome 80 so this now applies in more cases than it did previously.

[mrTyson]

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

[gruffvaughan]

Use minmax(0, 1fr); to allow your grid items to shrink.

Worked great for me! 🎉

[amingarro]

See #3415, this issue is not related to Slick, it's the expected behavior of fr units. Use minmax(0, 1fr); to allow your grid items to shrink.

Worked great for me.

[skrbnv]

in case of auto this also works: grid-template-columns: minmax(0, auto) 200px;

[crawlynoob]

best solved: grid-template-columns: calc(100% - 200px) 200px;