Change layout algorithm to prevent ui groups from stretching across the webpage on wider displays

Hi. Users of my node-red dashboard webpage have different screen sizes. I configured layout for width 960px and it looks great until I open it with near 1900px, those groups that were one under another moved on the same line, the whole layout became a totally mess. I restricted max size for 1080 px, but on my screen it occupies only a half of a screen, leaving two areas on both sides empty.

What I want is to save group ordering that was on 1080px width for 1900px and more. I read the documentation and found that actually dashboard uses grid but also it uses special algorithm to place nodes. Is there a way to somehow change or modify that algorithm? Or maybe there is a more easy and obvious step

If you want to force the layout always to be a particular way, then a solution is to put them all in one group rather than multiple groups.

There is a way but that puts you on charge to manage it. Takes to know at least something about CSS strategies of layouting

Explore this

1 Like

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