Dashboard Groups setup so that they are horizontally stacked

[lowchen]

Hi there,

I think I have some problems in setting up my dashboard. Please see below image for how my dashboard looks like now

As you can see, I have got 2 groups, group 3 consists of 4 buttons and group 2 is a map.

However, right now these 2 groups are stacked vertically. What should I do so that the groups can be displayed horizontally ? (i.e. the 4 buttons on the left, and the worldmap is right next to me)

FYI, I already set the width of both groups to be the same. Each button is of size 11, and the worldmap is of size 63

Thanks

[Colin]

You need to edit the group configs and adjust the sizes of the groups so they will fit side by side in the available space. Alternatively, if you want to make sure they always fit like that even on a small screen then put everything in one group of the appropriate width.

[lowchen]

Hi Colin,

Thanks a lot for your reply! Do you mind sharing an example of how I could edit the group configs and adjust the sizes ?

Sorry if this questions sounds too naive but I'm relatively new to node-red and new to front-end language...

Appreciate your help!

[Colin]

Open one of the widgets in the flow and click the pen icon next to the group field

Then in there you can change the width of the group.

[lowchen]

Hi Colin,

Yes in fact, I have already set both groups to share the same width. See below

However, even they are of same width, both groups are still not horizontally stacked (You can refer to my first post to see how my dashboard looks like).

What I want is to have one group sitting on the left and another group sitting on the right....

Thanks!

[Colin]

As I said, that means there is not room for 12 width units side by side on the screen. You will have to make one or both narrower so there is room for them to fit side by side. Or use one wider group with all the widgets in it.

[lowchen]

Hi Colin

I have set the width of both groups to be only 2...but still they are stacked vertically..See below

I even tried to set their width to be 1...and still they are stacked vertically...

Any ideas how to configure the available width on the screen ?

[Colin]

You can't set the group width to be less that the total width of the widgets that you have put there.
But as I keep saying, if you want to force a particular layout the easiest way is to specify one wide group and put all the widgets in it, then you can lay them out exactly how you want.