search

swordev / suid

A port of Material-UI (MUI) built with SolidJS.
https://suid.io
MIT License
660 stars 47 forks source link

Grid Item covers items in the row above #263

Closed NinoM4ster closed 10 months ago

NinoM4ster commented 10 months ago

So the way Grids work seems pretty weird. the actual element position is offset towards the top left and it uses padding to bring the content to the correct position, but that makes it so items in lower rows end up covering items above it, making their contents unclickable (plus another issue with elements below the grid).

image

Here's the playground link: https://stackblitz.com/edit/pcvhmn?file=src%2FApp.tsx

The current workaround I found (which I hate) is to set a reverse z-index on each item so that items lower down in the grid have a lower index and stand "behind" the items above it.

As far as I can tell this issue is not present in Mui: https://codesandbox.io/s/material-ui-grid-test-pqrgqj?file=/app.jsx

juanrgm commented 10 months ago

As far as I can tell this issue is not present in Mui: https://codesandbox.io/s/material-ui-grid-test-pqrgqj?file=/app.jsx

You are using MUI v4.5.1 and SUID is aligned with MUI v5.

Also, the MUI code is broken because width, height and sx aren't valid attributes for the Grid component (MUI v4).

NinoM4ster commented 10 months ago

You are using MUI v4.5.1 and SUID is aligned with MUI v5.

My bad, I just forked a random sandbox link, guess it was outdated.

Anyway, I think I figured it out. The Grid Container's spacing values were really high (14), pushing the items really far apart which I apparently tried to fix by setting the Grid Item's size but that ended up breaking the UI. Here's the fixed code.

Thanks for replying and sorry for not noticing it before.