How to implement equal cell height hack?

[ooloth]

Thanks for creating this component!

I'm trying to implement desandro's equal cell height hack, explained here and shown here.

Here is the hack:

// external js: flickity.pkgd.js

// add this code
Flickity.prototype._createResizeClass = function() {
  this.element.classList.add('flickity-resize');
};

Flickity.createMethods.push('_createResizeClass');

var resize = Flickity.prototype.resize;
Flickity.prototype.resize = function() {
  this.element.classList.remove('flickity-resize');
  resize.call( this );
  this.element.classList.add('flickity-resize');
};

I'm having trouble adapting this code to work with react-flickity-component. My attempt (shown below) is partially working, but causes an issue on first load that makes it seems like there is only one cell (the arrows are disabled and the dots don't appear). This behaviour fixes itself as soon as the carousel moves.

componentDidMount = () => {
    // See: https://codepen.io/desandro/pen/ZXEGVq
    this.flkty.element.classList.add(`flickity-resize`)

    const resize = this.flkty.resize
    this.flkty.resize = () => {
      this.flkty.element.classList.remove(`flickity-resize`)
      resize.call(this)
      this.flkty.element.classList.add(`flickity-resize`)
    }
  }

Can you please show me how to implement desandro's hack with this component?

[ooloth]

I managed to solve this! I just needed to point the resize call at this.flkty instead of this:

componentDidMount = () => {
  const resize = this.flkty.resize
  this.flkty.resize = () => {
    this.flkty.element.classList.remove(`flickity-resize`)
    resize.call(this.flkty)
    this.flkty.element.classList.add(`flickity-resize`)
  }
}

This seems to make the equal height cells hack work with react-flickity-component.

If anyone knows how this could be implemented in a better way, please let me know!

[ghost]

must been redhat whe need to do somethings somehow!

[ghost]

@pooeske887

[McGern]

If anyone ends up here, I found the hack made by @luksak on this thread https://github.com/metafizzy/flickity/issues/534 seems to work for me where ".carousel-cell" is whatever class you have on the slide cell.

.carousel-cell { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; }