How do I stop dashboard areas overlapping?

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.

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 :confused:

  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?

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.

1 Like

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.

1 Like

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