Skip to content
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

Removing rows/columns that contain items breaks the builder #1

Open
Martin-Cox opened this issue May 9, 2024 · 0 comments
Open

Removing rows/columns that contain items breaks the builder #1

Martin-Cox opened this issue May 9, 2024 · 0 comments

Comments

@Martin-Cox
Copy link

Description

Hi, first off thanks for making this builder. It's by far the easiest and most intuitive CSS grid builder I've found. That being said, it can break very easily when removing rows/columns that contain grid items. When doing so, grid items become misaligned with the grid, grid items get "stuck" off the grid, and moving/resizing grid items can crash the builder with the following error in the console:

index-11a1a072.js:40 TypeError: Cannot read properties of null (reading 'map')
at uN (index-11a1a072.js:44:3406)
at index-11a1a072.js:44:3733
at Array.flatMap ()
at sC (index-11a1a072.js:44:3722)
at My (index-11a1a072.js:44:4086)
at My (index-11a1a072.js:44:4394)
at My (index-11a1a072.js:44:4394)
at My (index-11a1a072.js:44:4394)
at My (index-11a1a072.js:44:4394)
at My (index-11a1a072.js:44:4394)

Initial state of the builder
State of the builder after removing a column

Expected Behavior

If a grid item starts on the row/column that was removed, I'd expect that grid item to be removed also. If a grid item does not start on the row/column that was removed, but ends or extends through it I'd expect that grid item's rowEnd/columnEnd to be updated to end on the new last row/column.

Using the above screenshots as a reference, I think items 1 and 2 should be updated so their columnEnd changes from 5 to 4 when the last column is removed, and I'd expect item 3 to be removed (because it starts on the column that was removed).

Steps to Reproduce

  1. Open https://visualgridbuilder.com/
  2. Set the grid rows and columns to 4
  3. Add a grid item in the last column
  4. Change the number of columns to 3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant