Flowpanel center and left align

[tobias.carlbom]

Hi all,

I dont get the flowpanel to work as i expect to. Its a little hard to explain so please bare with me.

1, Flowpanel align set to left. Cards is left align as expected but they are not center on screen (empty space to the right).

2, Flowpanel align set to center. Cards is centered as expected but i expect the card on the second row to be inlign with the left card in the first row. Not in between as show in the picture.

I have tried tinkering with the css but without success. Ive also tried both column panel and flowpanel as outer divs, also without success.

Any idea?

Login

[p.colbert]

It looks to me like the flow panel is working as designed:

• Fit as many items on a single row as will fit
• For each row, justify left, center, or right, as requested.

If you want each card on its own line, you can use use a linear panel as the outermost container.

To center each card within its row, wrap it in its own flow panel, with the flow panel set to center its own contents.

[Zaro]

@tobias.carlbom

Cards is centered as expected but i expect the card on the second row to be inlign with the left card in the first row

You could try using two flow panels. So FlowPanel_outer → FlowPanel_inner → Cards. Set the outer one to center align and the inner one to left align.

Not sure if it’ll work, but it’s my best guess on how to achieve what you’re looking for.

Edit: or left-align the FlowPanel and put it inside a ColumnPanel with spacers on each side.

[tobias.carlbom]

adding a custom role and attach it to a column panel did the trick. now i get the expected behaviour. example project is updated.

.anvil-role-container-test {
  background: red;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)) !important;
  grid-gap: 1em !important;
  padding: 1em;
}