-
Notifications
You must be signed in to change notification settings - Fork 107
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Strange Grid Layout bug? #454
Comments
Hi, |
Hi, I'm really sorry, but I think that I'm not able to make an example with tailwind, but the classes are same explanatory. Basically the col-span-2 is grid-column: span 2 / span 2; So in this case the draggable div should just take up the two available grid columns, but it doesn't... Only after dragging over the top div and then after one more random hover on any element the col-span-2 works fine, you can see it in the video. |
in order to be able to debug it I need to reproduce. If not possible with
a REPL can you make a github repo that I can clone and run?
…On Sat, Jun 24, 2023 at 8:42 AM nematix ***@***.***> wrote:
Hi, I'm really sorry, but I think that I'm not able to make an example
with tailwind, but the classes are same explanatory. Basically the
col-span-2 is grid-template-columns: repeat(2, minmax(0, 1fr)).
So in this case the draggable div should just take up the two available
grid columns, but it doesn't... Only after dragging over the top div and
then after one more random hover on any element the col-span-2 works fine,
you can see it in the video.
—
Reply to this email directly, view it on GitHub
<#454 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC2RTXZTPHGTAWQADX3XMYLT3ANCNFSM6AAAAAAZRO23RU>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Thanks. So I can see the the shadowElement (as in the placeholder in the grid) is getting the correct dimensions and is in the right place but for some reason they don't always get copied to the dragged element as expected (happens here). |
Yes, thank you very much:) |
I found the root cause. The browser is initially returning the wrong width when getBoundingClientRect is called. It seems like it takes time for the value to get to its correct value (around a 100ms). This could be seen by adding these two lines under line 75 in styler.js. console.warn("morphing", copyFromEl, copyFromEl.getBoundingClientRect().width);
window.setTimeout(() => console.error(copyFromEl.getBoundingClientRect().width) , 100); I checked without tailwind, with a normal grid layout (quick and dirty, just to check) and it behaves the same .my-grid {
display: grid;
height: 70vh;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.my-grid-item {
height: 50px;
}
.image-container {
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
.my-grid-item:nth-child(1),
.my-grid-item:nth-child(4) {
grid-column: 1 / 3;
} Interestingly, if I modify the code to copy the width from the computed styles instead of using the bounding rect by adding this
into |
Great, thanks for your time! I'll be waiting for any updates on this one :) |
Hi, just wanted to follow-up with you. Any fixes coming soon or new updates? |
? |
Hi,
I am traveling overseas so it's hard to find time to invest in this. Will
you be willing to test out the fix I described above and make a PR?
…On Sat, Jul 1, 2023, 01:26 nematix ***@***.***> wrote:
?
—
Reply to this email directly, view it on GitHub
<#454 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZCZTIWIBTM3QSRQI433XN3V25ANCNFSM6AAAAAAZRO23RU>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
I made this fix. Tested it superficially and it seems fine, would be great if you could pull it and make sure that fixes your issue and maybe test a bit to help improve my confidence here :) |
@3nematix FYI, the workaround was causing other issues so I moved it to behind a flag ^ |
Hi, I'm just wondering why does the
col-span-2
class only applies when the draggable div is only released?The thing is that I want to keep the grid layout as you can see in the attached video.
For some case when the image is being dragged to the first index it should get the col-span-2 class, but it doesn't.
03d94febde5436f93118cc9af4e046bc.mp4
The code:
The text was updated successfully, but these errors were encountered: