Slick slider dynamic content won't resize height

Question

I have a slick slider with adaptiveHeight.

The slider contains a multistep form and some fields are conditional and it's possible for error messages to pop-up.

When I display error messages or conditional fields, the height of the slide won't adapt, resulting in some fields to be cropped off.

When i resize the window, the slider resizes to the right height.

I've tried triggering the window resize event without any success.

Has anyone a solution for this problem?

Code Example: Codepen - Slick dynamic height changes

$('#dynamic').on('change', function() {
  $('.dynamic').toggleClass('visible');
});

As soon as you toggle the dynamic content, the rest of the form will be cut off.

Answer 1

Slider sets fixed height on div.slick-list.draggable. You need to give div.slick-list.draggable the same height as the first slide - div[data-slick-index="0"].

  var height = $('div[data-slick-index="0"]').outerHeight(true);
  $(".slick-list.draggable").height(height)

Use the above code in $('#dynamic').on('change' () =>{})

$('#dynamic').on('change', function() {
  $('.dynamic').toggleClass('visible');
  var height = $('div[data-slick-index="0"]').outerHeight(true);
  $(".slick-list.draggable").height(height)
});

---

Use this code should you want to have a similar animation as Slider.

  $(".slick-list.draggable").animate({height: height})