responsive grid item will not be distributed equally

[UTing1119]

hello! I used JBaysolution's vue-grid-layout before.

and the question I found today is the same as this issue. https://github.com/jbaysolutions/vue-grid-layout/issues/608

the example provides response options, but they will all be in the last column.

but I wanna try if they could be distributed equally.

will it be fixed in this package?

[gwinnem]

I'll start looking into a fix for this asap and let you know when it is deployed.

[gwinnem]

This is fixed in version 1.2.0

[UTing1119]

I tried the latest version(1.2.0)

and it will overlap each other with phone size:

I tried to change preventCollision to true and give a higher layout but nothing changed.

sandbox cannot select 1.2.0 version so there has no example. but I use the code with the example vitepress-docs/examples/components/07-example.vue with preventCollision = ref(true)

[gwinnem]

The sandbox is not updated but i'll release a new version soon. There is an issue with the distributeEvenly functionality set to true and a user is dragging or resizing a GridItem.

Can you add a screenshot and resolution from the phone you are testing it with.

[UTing1119]

I tried to add :distributeEvenly="true",but both <GridLayout> and <GridItem> doesn't work(it even works the same as the last version works) there are the screenshots about this problem

this is Chrome DevTools for mobile(Chrome version:112.0.5615.86) on PC

and those are Chrome and Safari on iPhone 12 ( 2532 × 1170 pixels)

if you need my code just let me know!

[gwinnem]

Please send me the code you are using. I'll look into it as soon as i have resolved the issue with distributeEvently and the user is dragging or resizing which was a unwanted side effect :)

[UTing1119]

grid.zip

cuz the code is too long so I upload a Vue file with ZIP.

[UTing1119]

I kinda found some way to solve it.

after check the source code of if(distributeEvenly) part, I change the way to calculate new place. (but I only test it with my code and some of the function in this library,not with this library)

// out of layout
if (item.x + item.w > column.value) {
  item.x = 0
  item.y += 1
}
// find any item which is overlapped
while (getFirstCollision(temp_layout, item)) {
    // console.log('overlap')
    item.x += item.w; // move x to next place which might be able contain it
    if (item.x + item.w > column.value) {
        // if this width is out of layout
        item.y += 1; // move y to next y
        item.x = 0; // start x from 0
    }
}

and this is the example: https://codesandbox.io/s/wonderful-lucy-z8690b?file=/src/components/demo.vue

my way is change all overflow item to the bottom of layout,so the layout isn't sorted.

if anything wrong plz let me know!

[gwinnem]

@UTing1119 Interesing code. I'll integrate it and do some tests before i can say if it fits in or not. Tnxs for the feedback.

[gwinnem]

@UTing1119 I have implemented your code and tested it with different layouts. Since im not running the responsive functionality on load it loks like it breaks on initial load. But the code behaves correct and the error is in the layout config: var layout = ref<Array<testItem>>([ { h: 1, i: 1, w: 1, x: 0, y: 0 }, { h: 1, i: 2, w: 1, x: 1, y: 0 }, { h: 1, i: 3, w: 1, x: 2, y: 0 }, { h: 1, i: 4, w: 1, x: 3, y: 0 }, { h: 1, i: 5, w: 1, x: 4, y: 0 }, { h: 1, i: 6, w: 1, x: 0, y: 0 }, { h: 1, i: 7, w: 1, x: 1, y: 0 }, { h: 1, i: 8, w: 1, x: 2, y: 0 }, ]);

The initial layout config is incorrect and creates the overlaps. GridItem's i: 6, 7 and 8 is overlapping the 3 first items. I have to assume that the initial layout is correct when the GridLayout is mounted. Your code also fixed an issue with the isMirrored prop which is excellent. I still want to fix some side effect that this functionality causes when a user is dragging or resizing a GridItem and an issue when dragging and dropping from outside before i release a new version. I'll leave this issue open until then..

[UTing1119]

okay! I'll keep looking into it and those issues. Hope we can fix them soon

[UTing1119]

the first part of testData Vue3-Responsive-Grid-Layout.webm

the layout you comment yesterday:

@gwinnem I didn't see any wrong of resize or drag(I just uncomment the resize part) I fixed problem of what if the layout is wrong at the first,and drag from outside problem maybe.(it cannot be recorded when dragging) when the static item is out of layout, I don't handle it specially. or should we try to let it stay at the same row and only the column-1 ?

I'm very bad at using GitHub :( I have a fork and it's the fix branch: https://github.com/UTing1119/vue-responsive-grid-layout/tree/responsiveAndDrag

if it's okay I'll create a pull request

[gwinnem]

Hi, tnxs for your effort. Please do create a pr and ill look through it asap and merge it in.

Geirr

On Fri, 21 Apr 2023 at 09:17, UTing1119 @.***> wrote:

the first part of testData Vue3-Responsive-Grid-Layout.webm https://user-images.githubusercontent.com/74576629/233564756-ccf7d2bd-9d10-4c72-94aa-92f5da7cfa17.webm

the layout you comment yesterday: [image: image] https://user-images.githubusercontent.com/74576629/233567607-c5700a32-a019-4be8-ab88-e47556f1fe69.png

@gwinnem https://github.com/gwinnem I didn't see any wrong of resize or drag(I just uncomment the resize part) I fixed problem of what if the layout is wrong at the first,and drag from outside problem maybe.(it cannot be recorded when dragging) when the static item is out of layout, I don't handle it specially. or should we try to let it stay at the same row and only the column-1 ?

I'm very bad at using GitHub :( I have a fork and it's the fix branch:

https://github.com/UTing1119/vue-responsive-grid-layout/tree/responsiveAndDrag

if it's okay I'll create a pull request

— Reply to this email directly, view it on GitHub https://github.com/gwinnem/vue-responsive-grid-layout/issues/2#issuecomment-1517380017, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRBD4GJYM5QCPPFOKYAUNDXCIYB7ANCNFSM6AAAAAAWOFX7OI . You are receiving this because you were mentioned.Message ID: @.***>

[gwinnem]

Tnxs to UTing119