Button alighment

I’m trying to place this button at the end so set the JustifyContentMode = FLEX-END but it says there is some display : block which is preventing this. I searched this display : block but it is striked out

How can I bring this button to the end?


this line fixed the issue


It’s not very intuitive if you’re not familiar with flexbox layouting, but justification = cross-axis alignment, while alignment = main-axis alignment
main-axis is vertical for VerticalLayout and horizontal for HorizontalLayout
and cross-axis is the opposite

although now that I’m looking at your devtools screenshot I’m curious how that justify-content property ended up on the vaadin-button element itself. Did you use some Flow API for that or did you just set that CSS property manually?

I used Flow API setAlignSelf

But that should not produce justify-content: flex-end on the button element, it should produce align-self: flex-end. Could you share the code where you used setAlignSelf?

(just to make sure there isn’t a bug in the setAlignSelf API that is)

you’re correct. It is producing ``align-self: flex-end’’

I’m not using ``ustifyContentMode = FLEX-END’’ now

It was removed

ok, all’s good then :+1: