Adding new cards with "doNotCompact" grid setting

a24vinla commented

2026-04-16 13:50:21 +00:00

Collaborator

Clarification of issue in comment.

The current solution, #289, requires the grid compacting to be set to vertical, which we don't want. When adding a new card when the setting is doNotCompact the cards simply get added to the top left of the dashboard, despite other cards being there.
Before adding:

After Adding:

We probably need to design our own method for checking the closest open location (from the top left corner). All views will have default width and height at some point, use temp values if they dont.

Useful information: https://github.com/react-grid-layout/react-grid-layout/tree/master/src/core

Parent Issue: #289

**Clarification of issue in [comment](https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/380#issuecomment-4170).** The current solution, #289, requires the grid compacting to be set to vertical, which we don't want. When adding a new card when the setting is doNotCompact the cards simply get added to the top left of the dashboard, despite other cards being there. Before adding: ![image](/attachments/753881e8-62e5-4db7-8826-fbb7343112a1) After Adding: ![image](/attachments/34c25c6d-e4e1-43e5-a8f6-cd22f13dd46b) ![image](/attachments/004191bf-dae0-410f-b323-e43f755ee0cb) We probably need to design our own method for checking the closest open location (from the top left corner). All views will have default width and height at some point, use temp values if they dont. Useful information: https://github.com/react-grid-layout/react-grid-layout/tree/master/src/core Parent Issue: #289

image.png

19 KiB

image.png

23 KiB

image.png

26 KiB

a24vinla added the

bug

label

2026-04-16 13:50:21 +00:00

e24aleli self-assigned this

2026-04-17 08:55:03 +00:00

e24aleli added reference #289-fix-interactivity-with-cards

2026-04-17 09:34:09 +00:00

e24aleli removed reference #289-fix-interactivity-with-cards

2026-04-17 09:34:23 +00:00

e24aleli added reference 380-Fix-Add-Card-GridLayout

2026-04-17 09:38:29 +00:00

e24aleli commented

2026-04-17 09:58:38 +00:00

Collaborator

Im not sure I have correctly published and commited to git but i made a new branch for #380.

Code changes

Changed doNotCompact so instead of using Null it uses horirzontal. Also changed Preventcollision to false because it makes it so that the cards can actually move around and fill the gaps.

Then i changed the X variable in addnewview to infinity to tell the gridlayout to find the next available spot. Alternatively, you can set this to Y and change the doNotCompact to vertical if you would want to make it add vertically aswell. Perhaps this could be an added feature?

Images

First card:

Second Card:

When horizontal "row"? gets full:

Im not sure I have correctly published and commited to git but i made a new branch for #380. ## Code changes - - - - Changed doNotCompact so instead of using Null it uses horirzontal. Also changed Preventcollision to false because it makes it so that the cards can actually move around and fill the gaps. Then i changed the X variable in addnewview to infinity to tell the gridlayout to find the next available spot. Alternatively, you can set this to Y and change the doNotCompact to vertical if you would want to make it add vertically aswell. Perhaps this could be an added feature? ## Images - - - ### First card: ![bild](/attachments/7f94d4f0-b1f7-490d-ac56-7ed8d504bee8) ### Second Card: ![bild](/attachments/63ea98f6-cb76-4b79-a2e5-a21b532313f7) ### When horizontal "row"? gets full: ![bild](/attachments/a3b3b08e-8aad-4890-bdd5-31aa94a221da)

bild.png

60 KiB

bild.png

66 KiB

bild.png

120 KiB

e24aleli added the

needs review

label

2026-04-17 09:58:55 +00:00

a24vinla commented

2026-04-20 12:00:14 +00:00

Author

Collaborator

Sorry, I think my instructions were a bit unclear, but we want a solution that allows us to have the compact setting as "doNotCompact", which allows us to place cards wherever on the grid without them being squashed to the top. The issue is that without compacting being set to vertical it simply places the new card in the top left corner, disregarding of the fact that other cards are there. I have looked at issues in the react-grid-layout git and it seems like it is a known issue.

However, since we are able to set the location of a card before creating it, know its default size, sizes and locations of other cards, as well as the grid dimensions, we can create a method that checks for spaces large enough for the card that's being added.

There could also be solution involving the grid-settings, but I have been unable to find any.

Sorry, I think my instructions were a bit unclear, but we want a solution that allows us to have the compact setting as "doNotCompact", which allows us to place cards wherever on the grid without them being squashed to the top. The issue is that without compacting being set to vertical it simply places the new card in the top left corner, disregarding of the fact that other cards are there. I have looked at issues in the [react-grid-layout git](https://github.com/react-grid-layout/react-grid-layout/issues) and it seems like it is a known issue. However, since we are able to set the location of a card before creating it, know its default size, sizes and locations of other cards, as well as the grid dimensions, we can create a method that checks for spaces large enough for the card that's being added. There could also be solution involving the grid-settings, but I have been unable to find any.

a24vinla removed the

needs review

label

2026-04-20 12:18:03 +00:00

e24aleli commented

2026-04-20 12:20:06 +00:00

Collaborator

Oh, correct me if im wrong but do you mean like no snapping? so you can freely put the cards where ever you want without the other cards to move aswell? Because I thought the issue was to stop the cards from "piling" ontop of eachother.

a24vinla commented

2026-04-20 12:56:04 +00:00

Author

Collaborator

What we want is this setting:

to be doNotCompact. It is however this setting that makes it so that the cards pile on top of each other. So the issue is to find a solution that allows us to keep this setting and for the cards to not pile when adding new cards.

I think that team_1 branch currently has vertical compacting which is a work-around to the piling-issue. I suggest quickly switching to the team_2 branch to better understand what I mean. Sorry for the confusing explanations.

What we want is this setting: ![image](/attachments/4d6e5617-94e9-445d-bf0c-bb51cd1cfc44) to be doNotCompact. It is however this setting that makes it so that the cards pile on top of each other. So the issue is to find a solution that allows us to keep this setting and for the cards to not pile when adding new cards. I think that team_1 branch currently has vertical compacting which is a work-around to the piling-issue. I suggest quickly switching to the team_2 branch to better understand what I mean. Sorry for the confusing explanations.

image.png

63 KiB

👍 1

e24aleli commented

2026-04-21 09:25:22 +00:00

Collaborator

I believe i have solved the bug now so that doNotcompact is still being used. However I ran out of grid spaces to test because you dont seem to have the remove card button in your branch (lol).

Changes and Additions

Added a simple detection algorithm, it essentially checks if a new card overlaps any existing card and if it does it marks the spot as "occupied"
Added a method called findFirstAvailableSpot, now when a new card gets added a scan gets performed starting at 0,0 and moves top left to bottom right until it finds an available space.

I commited the code however i never know if im supposed to push or not before review so i will just attach my dashboard.js in this reply

Other finds

I dont know if there is an issue for this or relevant but i found you cannot add two of the same cards. Lets say i add a text view then i want to add another. I have to add another vieww such as map view in order to add text view again.

EDIT

I just realised i accidentally made the logic inside of the team2 week2 branch, trying to move over changes to this branch.

Since this branch is total chaos right now i would advise to just try the solution on branch "Team2_week2"

I believe i have solved the bug now so that doNotcompact is still being used. However I ran out of grid spaces to test because you dont seem to have the remove card button in your branch (lol). ## Changes and Additions - - - - - Added a simple detection algorithm, it essentially checks if a new card overlaps any existing card and if it does it marks the spot as "occupied" - Added a method called findFirstAvailableSpot, now when a new card gets added a scan gets performed starting at 0,0 and moves top left to bottom right until it finds an available space. I commited the code however i never know if im supposed to push or not before review so i will just attach my dashboard.js in this reply ### Other finds I dont know if there is an issue for this or relevant but i found you cannot add two of the same cards. Lets say i add a text view then i want to add another. I have to add another vieww such as map view in order to add text view again. ## EDIT I just realised i accidentally made the logic inside of the team2 week2 branch, trying to move over changes to this branch. Since this branch is total chaos right now i would advise to just try the solution on branch ["Team2_week2"](https://git.webug.se/Andras/BoundlessFlowCampus2K/src/branch/team_2_week_2)

Dashboard(1).zip

11 KiB

e24aleli added the

needs review

label

2026-04-21 09:27:39 +00:00

a24vinla commented

2026-04-21 12:04:27 +00:00

Author

Collaborator

I checked and ran the code, seems to work well! It would be good if you could break out the functionality from dashboard into its own file, then either clean up your current branch or create a new branch and manually move you changes there.

Very well done, my apologies for the previous confusions!

I checked and ran the code, seems to work well! It would be good if you could break out the functionality from dashboard into its own file, then either clean up your current branch or create a new branch and manually move you changes there. Very well done, my apologies for the previous confusions!

e24aleli changed reference from ~~380-Fix-Add-Card-GridLayout~~ to #380-new-cards-with-doNotCompact-grid-setting

2026-04-22 12:25:27 +00:00

e24aleli commented

2026-04-22 12:52:04 +00:00

Collaborator

Thanks and no worries!

New fix

After trial and error i managed to rebuild the logic based on team1_week2
This branch does not have sizeconfig though but it wouldnt be that hard to add right now its hardcoded to 10 "spaces" on a column for cards to be places on a new row. You can just switch out lines 119-121. I can do it when we get to the point where size config is in the same branch as this resizing logic.. (which might be after today's merge?)

Broke out previous written code for logic in to dashboardUtils.js

I pushed the code to this new branch i made

Thanks and no worries! - - - ## New fix After trial and error i managed to rebuild the logic based on [team1_week2](https://git.webug.se/Andras/BoundlessFlowCampus2K.git) This branch does not have sizeconfig though but it wouldnt be that hard to add right now its hardcoded to 10 "spaces" on a column for cards to be places on a new row. You can just switch out lines 119-121. I can do it when we get to the point where size config is in the same branch as this resizing logic.. (which might be after today's merge?) Broke out previous written code for logic in to dashboardUtils.js I pushed the code to this new branch i made

a24timsv closed this issue

2026-04-23 11:19:12 +00:00

Rows
Columns

Adding new cards with "doNotCompact" grid setting #380

Code changes

Images

First card:

Second Card:

When horizontal "row"? gets full:

Changes and Additions

Other finds

EDIT

New fix