React-grid-layout: Question: keeping order onLayoutChange

Created on 22 Dec 2017  Â·  4Comments  Â·  Source: STRML/react-grid-layout

Our layout contains two breakpoints:

<ResponsiveLayout
        layouts={<layouts object configuration>}
        breakpoints={{
          lg: 1500, md: 1440,
        }}
        cols={{
          lg: 12, md: 8,
        }}
        isResizable={false}
        rowHeight={100}
        width={1200}
        margin={[20, 20]}
        containerPadding={[20, 20]}
      >
        {/* content */}
      </ResponsiveLayout>

Let's say our user starts to work in "lg" and re-orders the items in the content.
Then, when we shrink the screen to "md", the content is rearanged to what it was defined to in the original layouts object configuration.
How can I keep this consistent when moving back and forth between breakpoints?
So if user switched the order between key=1, key=2 in "lg" it will also be the that order in "md"?

Most helpful comment

@ConfigurableUIComponents @STRML have you found an easy way to solve this problem? I'm struggling with the same issue and would appreciate if there is a reusable solution. Preserving the order of the elements would be an essential feature of the responsive grid I'd say

All 4 comments

You'll want to create those breakpoint-based layouts yourself then if you want to keep order. We autogenerate them (just guessing, mainly) if they're not specified, but you have the power to listen to onLayoutChange and modify other breakpoints if you see changes.

thanks for your response. Can you recommend a way to calculate the order in
the onLayoutChange handler? Our "order" is left-to-right top-to-bottom.

On Thu, Dec 28, 2017 at 11:59 PM, Samuel Reed notifications@github.com
wrote:

Closed #692 https://github.com/STRML/react-grid-layout/issues/692.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/STRML/react-grid-layout/issues/692#event-1404029170,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ag2Sy1X9Fz83WmfvkpkXubAXADplik3cks5tFA8jgaJpZM4RKsXB
.

@ConfigurableUIComponents @STRML have you found an easy way to solve this problem? I'm struggling with the same issue and would appreciate if there is a reusable solution. Preserving the order of the elements would be an essential feature of the responsive grid I'd say

thanks for your response. Can you recommend a way to calculate the order in the onLayoutChange handler? Our "order" is left-to-right top-to-bottom.
…
On Thu, Dec 28, 2017 at 11:59 PM, Samuel Reed @.*> wrote: Closed #692 <#692>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#692 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/Ag2Sy1X9Fz83WmfvkpkXubAXADplik3cks5tFA8jgaJpZM4RKsXB .

@Fuasmattn , were you ever able to find a solution for this? I'd also like to know.

Was this page helpful?
0 / 5 - 0 ratings