search

swordev / suid

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

Grid Item covers items in the row above #263

Closed NinoM4ster closed 1 year ago

NinoM4ster commented 1 year 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 1 year 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 1 year 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.