Button alighment

Flow
1

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
image.png
image.png

2

How can I bring this button to the end?

3

addAndAlign(toggleButton,Alignment.END)

4

this line fixed the issue

5

image.png

6

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

7

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?

8

I used Flow API setAlignSelf

9

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?

10

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

11

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

12

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

13

It was removed

14

ok, all’s good then :+1: