Skip to content

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

@Martin-Cox

Description

@Martin-Cox

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions