[M3] Column panel center aligned when M3 as dependency

Anvil Q&A
1

When I use M3 as a dependency on an old material 3 app, the column panel changes behavior to center the content:

image
image1011×457 1.49 KB

If I remove the dependency, or starts a fresh M3 app with the new theme, the content is top aligned as normal.

Is this something that could be fixed in the M3 theme dependency so I don’t need to apply my own css to correct for it?
Is there a simple theme.css change I can do to fix it?

2 Likes
3

I saw there is a github issue for this. Are there any updates?

It compromises the backwards compatibility of the new M3 components for existing apps, as it messes up the layout in many of the places a column panel is used.

I think it would be nice to have a vertical_align property like the one present for FlowPanel. It would give app builders more flexibility when it comes to the layout.

@stein did you find an easy css fix that we can use until the staff addresses this?

4

So for me adding .anvil-panel-row {align-items: start} to the css fixes it without any issues.

But not sure if it might break something for other apps, so you can also create a role that you can apply selectively to your ColumPanels instead.

3 Likes
5

Thanks @Zaro! That did the trick. I don’t see adverse effects elsewhere in the app.

2 Likes