Alignment of groups in pages - Dashboard 2

Still getting my head around positioning widgets & groups in DB2.
I have a page laid out as 'Fixed', and 2 groups;
The first group is sized 6 x 6 and which contains gauges.
The second group is 3 x 6 and does not contain any widgets.
Together, they look like this;

However, whenever I add something to the second group, the group's height increases, and is no longer bottom aligned with the first group.
By example, I've added a 3 x 3 text box and some random text.

Now the bottom of the groups are no longer aligned :hot_face:

I must be doing something wrong!

It is by design as I understood it.

But let's do a magic trick maybe ...

.v-card{
   height:100%;    
}
1 Like

A strange choice, but maybe I'm not seeing the bigger picture. I'm sure most people would expect a 3x6 group to actually measure 3x6 ...

Your magic works :smiley:

Height of the group is not solid value but driven by content. As groups don't know anything what is happening in same row (level up) the can't adjust just by that. The magic you added makes all groups in row to have height of the tallest group in that row.
The downside is that if you have a lot of empty space in one group it will be hard to tell widgets in that group to align themselves somehow differently.

But that's another long story. Ask if you reach that.

1 Like

Yeah, @hotNipi and I have gone back and forth on this a little. It's complex. If a user defines a box to be 3x1, but the content they put inside exceeds the "1" height, do we hide the additional content, or size with it?

There are solid arguments for both ways, but currently, we auto-size with the content.

Don't show it would be my preference, currently it's going to cause all sorts of layout issues for users.
If it doesn't fit, maybe the user should re-assess the size of the group, and increase it if necessary.

It is more than complex. The expectations of users differ a lot. And there's no way to satisfy them all.
We do miss one key point almost all the time - the user can't design the dashboard but only the cards content. This was same for DB1 and it has been hard to explain to users that this is the actual limitation. Cos hey - even to be able to change some color outside the card makes assumption that everything is under your control. But it isn't.
DB 2 makes couple of steps already to open up that area for users but this is only moving around the boundaries not giving full freedom. That freedom can't be given cos then you lose all the base standards for widgets or whatever needed elements.

But step by step and keeping conservativeness in decision making, some options about layout modifications can be introduced. And it wouldn't hurt if the behavior of layouts is described from different viewpoints. To get best out from such descriptions - it should be written by end user or at least written from end user perspective.

1 Like

Also... in my example above, the group was 3 x 6, and the widget was only 3 x 3, so why was it necessary to auto increase the size of the group, surely 3 x 3 would fit with room to spare??

Misunderstanding here is that group doesn't have solid height.

There doesn't seem much point in specifying a size at all if it's just going to change size itself for no good reason :face_with_raised_eyebrow:

Amen to that :slight_smile:
It depends if the user wants layout to be king - or the content to be king... If the former then you have to trim/scroll content to fit - if the other then the layout can go all over the place...
Likewise with colours/sytles/themes... should the overall theme be "in charge" in which case users always then want to set widgets, or have widgets in charge in which case the overall look tends to be a mess (IMHO) - unless the users goes and codes things everywhere...

Definitely - more than complex.

1 Like

Good reason will be that no matter the user's screen size the layout adjusts. Next option will be to start with defining whole dashboard (and then layout and then ...) by screen size and then the widget maker goes crazy to make the widget that supports all those couple of thousand rules.

In this case, I think you may have found a bug then, mind opening it up on GH with the screenshots and I'll take a look?

1 Like

Done - Alignment of groups in pages · Issue #650 · FlowFuse/node-red-dashboard · GitHub

1 Like

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