[bug] items with percentage-height not laid-out properly until after resizes

[gojomo]

When an item's height (and perhaps width) is set as a percentage of the relevant container, the initial isotope-layout doesn't seem to take into account its actual display height. Interestingly, isotope eventually catches up after forcing several window resizes.

See for example:

http://jsfiddle.net/bqK23/1/

(This is derived from the 'highlighting first item' blog example with just 3 changes: (1) layoutMode is straightDown; (2) new .proportionate class sets a 20% height; (3) the second element listed is given the proportionate class.)

Not that the initial layout has items overlapping as if the second item has little if any of its true height. But, if you resize the window, the layout almost fixes... and another resize or two causes it to catch up completely. (This is the case even if the resize is horizontal, and doesn't affect the actual 20% height.)

[desandro]

I don't think this is necessarily a fault of Isotope. If you remove the JS from your example, you'll see that the CSS result collapses with no height: http://jsfiddle.net/bqK23/2/

The only reason why it works in Isotope the way it does is because Isotope sets the height of the container.

So you're going to have to solve for this within your own custom JS. Building inherited percentage-based for items would be a bit outside the scope of Isotope.

[gojomo]

Aha I see; the heightlessness you've demonstrated seems to be because the container initially has no fixed height.

And, when isotope later sets the height, it's doing so based on the item height before isotope's sizing, not after. That also explains the Zeno's-paradox-like way each window resize triggers halfway progress towards the desired look.

Just for reference, using a specified container height (as a % of 100% HTML,BODY), I've achieved the desired percentage-item-height effect inside jsFiddle. See:

http://jsfiddle.net/bqK23/7/

Thanks for your help!