v3.0.0 cuts last element before moving it to the next row #46

Closed
luopio opened this Issue Oct 20, 2014 · 4 comments

Projects

None yet

2 participants

@luopio
luopio commented Oct 20, 2014

Everything works beautifully in 2.1.1. I'm testing by using the same layout, same JS code and just switching between release 3.0.0 and 2.1.1:

$('.properties-listing-container').shuffle({
itemSelector: '.property-listing',
columnWidth: 300,
gutterWidth: 20
});

Container is a div with article-elements inside. Article has fixed width of 300px.

v2.1.1 works correctly:
v2 1 1

v3.0.0 won't update until around 1160px container width, which results in cutting the last element. Also note the behaviour on second line.
v3 0 0

Same thing happens in FF (33) and Chrome on Ubuntu 14.04. Also witnessed on Mac by other devs in my team.

@Vestride
Owner

Could you post a link to your demo please.

On Monday, October 20, 2014, Lauri Kainulainen notifications@github.com
wrote:

Everything works beautifully in 2.1.1. I'm testing by using the same
layout, same JS code and just switching between release 3.0.0 and 2.1.1:

$('.properties-listing-container').shuffle({
itemSelector: '.property-listing',
columnWidth: 300,
gutterWidth: 20
});

Container is a div with article-elements inside. Article has fixed width
of 300px.

v2.1.1 works correctly:
[image: v2 1 1]
https://cloud.githubusercontent.com/assets/69383/4697414/a9aef03a-5825-11e4-950c-aa1cf58483d2.png

v3.0.0 won't update until around 1160px container width, which results in
cutting the last element. Also note the behaviour on second line.
[image: v3 0 0]
https://cloud.githubusercontent.com/assets/69383/4697413/a9ab725c-5825-11e4-8421-7400f35fd650.png

Same thing happens in FF (33) and Chrome on Ubuntu 14.04. Also witnessed
on Mac by other devs in my team.


Reply to this email directly or view it on GitHub
#46.

Sent with my thumbs

@luopio
luopio commented Oct 20, 2014

Didn't have a demo I could publish, but here's one now: http://jsfiddle.net/luopio/oo63amox/1/. If you make the result window smaller, it'll allow the last element to cut before moving it to row 2.

@Vestride
Owner

Thanks, for the demo, I see what the issue is. The COLUMN_THRESHOLD value is too high at 0.3.

I had added this buffer value because reading the width of elements isn't precise enough and was causing columns to jump between values. I do not remember why I set it so high though. I'll need to play around with this value. Maybe it should be customizable too.

@Vestride Vestride self-assigned this Oct 20, 2014
@Vestride
Owner

Released v3.1.0. There is now a new option columnThreshold and updated logic to retrieve non-integer widths of elements.

@Vestride Vestride closed this Mar 24, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment