Is there a way to align to the right a vaadin-checkbox inside a FormLayout?

I’m trying to shift a check box inside a FormLayout to the right edge. The CSS trick with {margin-left: auto} works outside of the form, but not when a component is added to the form. Any ideas?

If you wrap your checkbox with s div it should work

I’ll try, though intuitively it feels there got to be a more natural way.

The FormLayout is a very opinionated layout that isn’t designed to give much flexibility in how things are laid out.

Could you share a screenshot to show what your form is like and what you want to achieve?

@useful-whale here it is.

As a user, I would hate that I have to move my mouse from the left to the right and back to the left side to click the button… instead of forcing me to move my mouse to the right, I would be more pleased if the switch button is also on the left

@quirky-zebra I’d a agree if these controls were frequently used. Having them all aligned to the left creates two problems. First, they are in the oft-seen area while not being often used. Second, they bunch up with frequently used form controls, creating a single area with two unrelated uses.

I don’t really see any reason to use a FormLayout there at all. That’s just a vertical stack of components, isn’t it?

FormLayout doesn’t have a way to align fields to particular edge, since it sets all fields to have 100% of the column width. So the checkbox component in there is also 100% wide, and thus already flush with both left and right edges.

You can override the width that FormLayout sets on the checkbox e.g. with max-width: fit-content; and then align it to the right with margin-left:auto, and that should work fairly well if it’s the last component in the layout, but if not, it will mess with anything that comes after the checkbox.

So yes: wrap the CB into a Div or something, or don’t use a FormLayout.

@useful-whale Thank you for the input. The above screenshot is just a fragment, there are 8 fields total. When does the FormLayout sets widths? Are there alternatives to FormLayout to maintain responsiveness?

Technically any layout can be made responsive if you apply flex, grid or other css properties you are hopefully familiar with.

Seeing the entire form would help for giving advice, but I’m assuming you have two instances of the exact same set of fields side-by-side?
One way you could do that is to just have two VerticalLayouts wrapped into a FlexLayout set to wrap, and set a minimum width for each VerticalLayout. That way it should wrap once the two side-by-side sections reach that min-width.

@useful-whale thanks, I’ll give it a try.