Broken resize when width changes with fluid text

[ldwg]

Thanks for Masonry!

I experience the following problem: With responsive layouts, the height of containers changes after masonry positions them.

When I resize the browser-window: First, the containers are repositioned depending on their current height. Secondly, the viewport dependent css is applied, which may cause a new height. Result: There is a gap below the now-smaller element.

An example: Imagine a container in a grid-layout that holds some text. When the browser window is narrowed down, the grid gets linearized and the containers width therefore increases. The container will be repositioned first, then the new width is applied, and therefore the height decreases at the same time. This results in a gap below the now lower element.

Not sure, this is this considered a bug, but I thought I let you know?! What would be an elegant solution? Thanks, again.

[desandro]

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[ldwg]

Thanks. Here we go (resize your browser window quickly from let's say 1.000px to 500px width): http://codepen.io/ldwg/pen/eCwnK

[desandro]

Ah, thanks for that. Yes, this is a bug. I'll have to investigate further.

[ldwg]

Thanks, @desandro. Let me know, if I can assist in any way.

[desandro]

Finally figured it out

Try setting a default size for the item elements

.ms-item { width: 100%; }

See example http://codepen.io/desandro/pen/pctjE

Here's a more clear example: http://codepen.io/desandro/pen/mlJdi

What's happening

Without a width set, text will flow naturally within the confines of the window. This makes text wrap in the screen, rather than running off of it. With more text on the screen, the size of the item is measured incorrectly.

[desandro]

Closing as an edge case.