React-slick: Recalculate height when content of slide has been changed

[martinpesout]

Is there any way how to recalculate height of slide when content has been changed? I'm using adaptiveHeight feature and when I change something in active slide, content will overflow.

I'll give one example:

      <Slider ref="slider" {...settings}>
        <div> ... content of first slide ... </div>
        <div> ... content of second slide ... </div>
        <div> ... content of third slide ... </div>
      </Slider>

I've found that the only way is to call this.refs.slider.forceUpdate() to recalculate height. But I have to do it every time I change content. Is there any chance to implement some workaround for auto-correction of height?

[yn5]

@martinpesout I'm having the same issue in gatsbyjs when in when running the dev env. But not when serving the compiled production build. So it most probably has something to do with the fact CSS is not entirely loaded yet when react-slick is calculating it's components. Most probably because the CSS is injected using style tags which is often done in hot reloading environments (and causes the visible FOUC as well).

I agree it would be great to see this solved within react-slick though, since this doesn't look too nice:

componentDidMount () {
  if (process.env.NODE_ENV === 'development') {
    setTimeout(() => {
      this.slider.forceUpdate()
    }, 0)
  }
}

[wellyal]

Any updates for this issue?

[wellyal]

I came up with a solution for this issue. Once I had my Slick component I could get its reference with ref react API like this:

<Slider
        ref={ref => { this.slider = ref }}
        {...slickSettings}
        ...

Then when you wish you could simple call the forceUpdate method form slick`s ref like this:

this.slider.forceUpdate() // Updates height from your slider

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[yuwei-liang]

I also have this issue. I have some nested collapses in each slide, which would change height of the slides when opened. But somehow the Slider doesn't resize immediately until I click somewhere.