Flickity breaks cells with variable widths

[EugeneDae]

I'm very sorry for posting an implementation question but I'm desperate :(

Reduced test case:
http://codepen.io/EugeneDae/pen/wMRKJK

Here's how it should look like: (I've replaced Flickity's function with overflow: scroll):
http://codepen.io/EugeneDae/pen/qbLbBz

Each cell consists of an image of arbitrary width followed by a caption, which is a <div> with text on orange background.

• Why are some cells missing their captions?
• Why does the gallery sometimes load with lots excess scroll space? (screenshot)

I'd appreciate any thoughts. Same question on StackOverflow. Thanks in advance

[desandro]

Thanks for reporting this bug! The the layout bug is caused by using inline-block for gallery-cell, with floats used for inner content. While this works without Flickity, it breaks when Flickity is enabled because it sets position: absolute on cells.

A better solution is to use flex-box for the gallery-cell layout. See demo on CodePen.

Now there's one last bug, using imagesLoaded with freeScroll was not aligning cells correctly after images had been loaded. This bug has been identified and will be fixed in the next version of Flickity. In the meantime, you can add this JS to solve it (already in the demo).

// fix freeScroll and imagesLoaded alignment bug
Flickity.prototype.cellChange = function( changedCellIndex, isPositioningSlider ) {
  var prevSlideableWidth = this.slideableWidth;
  this._positionCells( changedCellIndex );
  this._getWrapShiftCells();
  this.setGallerySize();
  // position slider
  if ( this.options.freeScroll ) {
    // shift x by change in slideableWidth
    // TODO fix position shifts when prepending w/ freeScroll
    var delta = prevSlideableWidth - this.slideableWidth;
    this.x += delta * this.cellAlign;
    this.positionSlider();
  } else {
    // do not position slider after lazy load
    if ( isPositioningSlider ) {
      this.positionSliderAtSelected();
    }
    this.select( this.selectedIndex );
  }
};

[EugeneDae]

Thank you so much, David! 💙

I've made a working demo with tables in place of flex box (which I can't use in my project yet)
http://codepen.io/EugeneDae/pen/zryKbx

Upd: CSS tables work as well.

[desandro]

This bug has been fixed in Flickity v1.2.0. Get the latest version at http://flickity.metafizzy.co . Thanks so much for your input here. Glad to have this one solved 🐻