Grid layout out of order - forcing new row?

Dashboard
1

I have a dashboard set up like (order verified by exporting nodes):

  • ui_text, 3x1, order: 1
  • ui_text, 3x1, order: 2
  • ui_text, 3x1, order: 3
  • switch, 6x1, order: 4
  • ui_text, 3x1, order: 5
  • ui_text, 3x1, order: 6

I expect to see:

| 1 | 2 |
---------
| 3 |
---------
|   4   |
---------
| 5 | 6 |

Instead I'm getting:

| 1 | 2 |
---------
| 3 | 5 |
---------
|   4   |
---------
| 6 |

My assumption was that the dashboard was built with the CSS grid layout pattern, but, after digging into the generated code, it appears the more modern flexbox is being used. I have not been able to figure out a way to force a row break there, either in the generated code or through the dashboard UI.

Other than making my last item 6x1, is there any way to force a new row? Resizing the item is not an ideal solution since there is no visual indication of the size and it requires an awkward amount of editing if I insert or remove items before where I want the break.

2

In the dashboard layout have you tried inserting a spacer after item 3

3

That's kind of what I was expecting to find, but I don't have anything called "spacer" or anything else that sounds remotely related in the available nodes.

Nevermind. It's in the layout panel. But it doesn't force a new row. It behaves just as the 6x1 switch row does. The flexbox layout algorithm still floats the following elements up to fill out the row.

4

It works testing on my machine . You can set the size of the spacer.

Screenshot_20210603-200800
Screenshot_20210603-2008001920Ă—1080 172 KB

Screenshot_20210603-200901
Screenshot_20210603-2009011920Ă—1080 79.8 KB

5

Well, yes, but that's just adding a dummy item that will need to be removed if I add or re-arrange the items but better than editing the size.

I'm looking for a way to say "don't put anything else in this row." Flexbox does have mechanisms that support that and it would be nice to have those available here. So far I haven't been able to get anything working with the styles being used though.

I'm going to keep playing with the HTML/CSS to see if I can figure out a better solution.

6

It seems as though the best solution for the moment is to create a new group, turn off the name display and put the next group of controls in there. Less than ideal (there is a visible divider between them), but works for now.

Update: there are other issues. On wide displays the second group now appear beside the first one, instead of underneath.

1 Like
7

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