# How do I stop dashboard areas overlapping?

**URL:** <https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [31 January 2023 17:01 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498 "2023-01-31T17:01:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nelgin](https://avatars.discourse-cdn.com/v4/letter/n/6de8d8/32.png) [@nelgin](https://discourse.nodered.org/u/nelgin)\
**Post date:** [31 January 2023 17:01 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/1 "2023-01-31T17:01:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/969c4811dd4aded26409d4676827674fa14be1e4.png)

How do I stop this from happening when I narrow my browser? If I make it extremely wide then everything fits, but I don't always want that to be the case, and not everybody has a wide screen like I do.

---

<div class="post-metadata">

**Author:** ![nelgin](https://avatars.discourse-cdn.com/v4/letter/n/6de8d8/32.png) [@nelgin](https://discourse.nodered.org/u/nelgin)\
**Post date:** [13 February 2023 07:09 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/2 "2023-02-13T07:09:11Z")

</div>

I guess it's not possible, in which case that sucks, or it's a very common problem documented somewhere very obvious that I even more obviously overlooked 😕

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [13 February 2023 07:31 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/3 "2023-02-13T07:31:38Z")

</div>

1. Are you using the latest version of node red dashboard? If you upgrade, force a cache clear in the browser via its menus.
2. What browser and version are you using?
3. Is it the same if you use a different browser?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 February 2023 07:45 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/4 "2023-02-13T07:45:05Z")

</div>

It is known. Dashboard uses masonry layout. By the definition it requires elements to have same dimensions for one axis. Mostly applied for columns so elements can have arbitrary heights then.

To get rid of the issue adjust all groups to have same width.

Yes, some combinations allow to have different widths for groups but those must be chosen with care and still, it is not 100% bulletproof.

It is not very practical to fight against provided layout. The advise is to not try to design the web page but the content of the cards. Dashboard is not meant to be absolute tool supporting every possible wish, it is meant to quickly and easily get started without needs to know anything about front-end coding.

If it does not satisfy your needs, next step is to create the dashboard using more flexible options. But that flexibility comes with more work to be done and more knowledge to have.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 February 2023 07:58 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/5 "2023-02-13T07:58:08Z")

</div>

Though not exactly the solution:

Make "End of the line", "Paging" and "BBS users" the same **height** (top to bottom).

That will help a lot.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 March 2023 07:58 UTC](https://discourse.nodered.org/t/how-do-i-stop-dashboard-areas-overlapping/74498/6 "2023-03-15T07:58:47Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.