Flow panel with both left and right aligned items

Is it possible to create a flow panel with some elements aligned to the left and some aligned to the right?

Just like the header of this forum page, with one item on the left (Anvil logo) and 7 items on the right (links to site pages).

What do you mean by floating panel?

Sorry, I meant flow panel (I edited the subject and the post)

The only way I can think of is to put two, side by side, one aligned left and one aligned right, both inside a column panel with the column panel wrapping set to none.

Other than that, you might need to copy the way the material design template does it.

That’s the way I do it.
The problem is that I need to set the flow panels width at design time. The result is that if a label is too long it will wrap instead of expanding into the space available in the other flow panel.

This is also an annoyance in many of my forms, where I use two flow panels to get the same effect. It’d be nice to have some more flexible options for widths.

1 Like

The way to do this is to create a FlowPanel with align set to justify, and then place two more FlowPanels inside it. One will end up on the left, and one on the right, allowing you to stack components on either side.

Here’s an example, with a label on the left and a bunch of links on the right. I’ve left it with lots of vertical margin so you can see the structure:

image

4 Likes

Would a third FlowPanel then be centered?

I had tried with 3 flow panels, but I didn’t think about using justify.

Your label on the left doesn’t really need a flow panel because it’s the only component inside the panel.