search

metafizzy / outlayer

:construction_worker: the brains & guts of a layout library
163 stars 63 forks source link

Masonry re-position issue #20

Closed ev5unleash closed 10 years ago

ev5unleash commented 10 years ago

Hi all,

So I'm having an issue where Masonry will only try to fit DIVs next to each other if it has excessive space. For instance, I have 2 divs one with 300px width and another with 700px width in a container of 1000px width. Mathmatically, 300 + 700 = 1000 no? When I try to use masonry on this layout, it will stack DIVs on top of each other instead of next to each other. The only way I've gotten it to work is to increase with width of the container to about 300px more than the required width.

Working but not whitespace: https://dl.dropboxusercontent.com/u/8556362/Capture1.PNG Not-working, but should: https://dl.dropboxusercontent.com/u/8556362/Capture.PNG

Example Code:

<!DOCTYPE html>

Not sure if I'm doing something wrong or this is actually a bug. Any help would be appreciated.

desandro commented 10 years ago

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.

ev5unleash commented 10 years ago

Hi Desandro,

The link is below: https://gist.github.com/ev5unleash/f277be83f28d0bec233c

Thanks

desandro commented 10 years ago

Thanks for providing an example! I'm still not seeing the problem. 2 items are 450px wide, the next two are 100px wide. columnWidth = 200. The items are being laid out properly. If you set .item.w2 { width: 200px; }, you'll see that items will be laid out into columns. Can you edit this example to display the bug?

ev5unleash commented 10 years ago

I have updated the example to reproduce the issue. As you can see Masonry is not fitting the two items next to each other, even though they could fit. I have to take the width of one of the layers down a good 30-40px in order to get Masonry to fit them together. But of course this causes the layout to contain some white space.

ev5unleash commented 10 years ago

Sorry, I'm new to this codepen/github thing. Here is my updated example that shows the issue

https://gist.github.com/ev5unleash/f277be83f28d0bec233c

desandro commented 10 years ago

You have set columnWidth: 0, which is not quite a proper columnWidth. Masonry layout mode defaults to the outer width of the first item in this situation. In your example, the columnWidth is calculated to 330px.

The second item's outer width is 663px.

663 / 330 = 2.01

The second item is just a little bit bigger than 2 columns, so it requires 3 columns.

You can resolve this two ways.

  1. Set the width of the second item to fit, .item.w3 { width: 650px; } and set columnWidth: 330. See http://codepen.io/desandro/pen/lJunf
  2. Set columnWidth to accommodate these two widths, like columnWidth: 10 See http://codepen.io/desandro/pen/kvjLo

I recommend solution 1, as a large columnWidth will perform better.