Slick: Height of the slick container is not set correctly on init

[recser]

I have a slick with the following options :

var slick = this.container.slick({

                vertical: true,

                slidesToScroll: 1,

                autoplay: true,

                autoplaySpeed: 2000,

                arrows: false,

                slidesToShow: 10,

        });

A 'row' has 28px height so the container height should be set to 280px, but right after init the container has a height of 560px and only after sliding the first slide it gets resized to the correct height.
Is this a normal behaviour or can it be changed to set the correct height ?

[simeydotme]

Please provide a JSFiddle showing the error. As mentioned in the Contribution Guidelines :)
Thanks, Si.

[recser]

I cannot reproduce it in a JSFiddle :(

[recser]

Maybe that just happens because of other wrapping containers over the slick, it really strange how it does not take the correct height right after creating the slick object.

[recser]

OK, i did found why it was happening. It was because i modified the slick.css to use

display:flex

for classes

.slick-vertical .slick-slide

and

..slick-initialized .slick-slide

[recser]

Just as a quick fix for anyone that maybe encounter the same problem with flex containers, you just have to wrap your flex containers into other non-flex container so that you keep the flex grid for all the rows child items. I assume this isn't a bug and it can be closed

[simeydotme]

Thanks for leaving the solution for other users! @rodofatos :bow:

[TarasMykytka]

@rodofatos, thanks for help!

[brodrigues1990]

Thanks a lot @rodofatos 🙌

[puzol]

Had this problem very recently and I've solved it differently.

Placing the slick functions inside a jquery $(document).ready() function did the trick.