Grid layout out of order - forcing new row?

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.

In the dashboard layout have you tried inserting a spacer after item 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.

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

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.

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.

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