React-grid-layout: Horizontal compacting

[TheoRyley]

When a responsive grid is resized its items aren't compacted horizontally leaving empty space on the left.

[doeg]

I'm seeing this as well. Not sure if it's intentional or a bug. (If it's the latter, I'd be happy to try and help!)

[STRML]

This is more or less intentional, but only because I simply haven't defined rules for where these items should go when they are squeezed out.

See where a new layout is generated for somewhere to start if you want to mess with this issue.

Just an FYI, there are some dragging issues in master that you won't see in the demos; nothing to worry about, I'm working on a refactor of <Draggable> that will fix it.

[doeg]

@STRML Awesome, thanks for the code pointer. I'd love to play around with it. :) If I come up with anything worthwhile, I can send a PR your way.

Thanks so much for writing such a great library!

[cmelion]

I created a quick and dirty fork that replaces the Vertical Compacting with Horizontal Compacting and some additional behavior required for a project I'm working on. Not sure if the examples will work without modification, but will try and fix if there is any interest. At some point in time I'll attempt to make the compaction rules configurable.

https://github.com/cmelion/react-grid-layout

[STRML]

The branch horizontalCompact makes this configurable via a new prop, compactType, which deprecates verticalCompact. Options are 'horizontal', 'vertical', or null.

Behavior seems good so far, would appreciate anyone who's willing to test it.

Also thinking about expanding this to top/bottom/left/right, with top being the current behavior. bottom would be tricky without a fixed height though, and RGL will do undefined things with fixed heights.

[AlanBreck]

Not sure what I'm doing wrong, but I'm attempting to use the horizontalCompact branch, but running into errors when attempting to install dependencies and build. When running npm install, I get the following output: https://gist.github.com/AlanBreck/2ccb8b7052b46534d24ca7690048ff77#file-gistfile1-txt

The errors start on line 65: https://gist.github.com/AlanBreck/2ccb8b7052b46534d24ca7690048ff77#file-gistfile1-txt-L65

Any thoughts?

[uneart]

I'm also interested in using horizontal instead of vertical compacting. How can I install this branch using npm?

[rorz]

Is there a reason why this was dropped? I was checking out the branch and it seems to have been written in a way that was intended to supersede _vertical-only_. Now it's gone a bit stale since its last commit was 9 months ago and this is a well-maintained project.

I'm interested in using both horizontal and vertical compacting in tandem, and wouldn't mind doing the groundwork (using the current branch as a primer) if @STRML is open to the idea?

I'm new to React, however, and would probably need some co-contributors if the demand is still there.

[agaurav]

@rorz @STRML I will be very much willing to help out as well.

[victor5114]

@STRML @agaurav I'm also interested in improving the horizontal compacting feature.

[TrySound]

I guess it's fixed.

[Muneebwasikhan]

Not fixed yet?? can anyone help if know the solutio?