Packery failed to calculate container height and width? about packery HOT 5 CLOSED

Thanks for the report! Could you provide a reduced test case for either issue? See Submitting Issues in the contributing guidelines.

from packery.

I might have a test case, the issue doesn't happen in isolation but in certain circumstances. http://rma-dash.herokuapp.com/

    @pckry = $container.packery({
      itemSelector: '.item',
      gutter: 0
      transitionDuration: "0.9s"
    }).data('packery')
    window.pckry = @pckry
    itemElems = @pckry.getItemElements();
    _(itemElems).each (elem) =>
      draggie = new Draggabilly( elem );

This is applied in a timeout so that the bug is more visible.

from packery.

Ok, just realized that if you are setting item heights as %, the change of container's height(maxY) would break the layout.

For me commenting out this.element.style.height = elemH + 'px'; seems to fix the layout, but I am sure it would break some things.

@desandro what's the rational of setting container's height?

from packery.

OK, we fixed our bug on width issue, but it's cargo-cultish fix.

We fetch our payload using AJAX, so we figured we may have timing issue and that turns out to be correct.

If we instantiate Packery too soon, we get the width bug that create the N-1 problem.

If we instantiate Packery too late, we see transparent white space on top.

Maybe it's because we didn't set this.options.isInitLayout = false?

from packery.

Yes, so

1. percentage height on items will not work, currently. If you had an option to disable Packery from setting height on a container, would this resolve your problem
2. Container width is container width. The only problem I see is that Packery sets position: relative, which may affect the size of the container. You can changed this with containerStyle option

from packery.