I have to configure a CheckBoxGroup which should have the items aligned 2 in a row. But it is not working, if I give the horizontal theme and also tried it using the css also.
It always displays items vertically.
I want this to be displayed as below.
with Vaadin Flow 24, For the valo, you are using an older version.
@ Test
final H3 h3 = new H3("Police Type");
final HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setWidth("50%");
final CheckboxGroup<String> checkboxGroup = new CheckboxGroup<>();
checkboxGroup.setWidth("200px");
checkboxGroup.setItems("Guaranteed Cost", "Participating");
final HorizontalLayout horizontalLayout1 = new HorizontalLayout(checkboxGroup);
final CheckboxGroup<String> checkboxGroup2 = new CheckboxGroup<>();
checkboxGroup2.setWidth("250px");
checkboxGroup2.setItems("Deductible", "Retrospectively Rated");
final HorizontalLayout horizontalLayout2 = new HorizontalLayout(checkboxGroup2);
horizontalLayout.add(horizontalLayout1, horizontalLayout2);
super.add(h3, horizontalLayout);
super.add(h3, horizontalLayout); inside a VerticalLayout
Anyway, do you want the same for all screen widths ?
Not sure it directly relates to your question, but I wanted a similar layout for regular checkboxes:
That could in theory be done with a flex container with flex-direction column and a fixed container height, so that the checkboxes would wrap to the next column.
Unfortunately that ran into a bug in Firefox.
I asked on stackoverflow and got a workaround (using writing-mode: vertical-lr):
You could try to change the display type of the inner container to grid. Something like
vaadin-checkbox-group.align-horizontal-checkbox-group::part(group-field) {
display: grid;
grid-template-columns: 1fr 1fr;
}
Its easy:
policyTypeCheckBox.getElement().getChildren().forEach(checkbox -> checkbox.getStyle().set("width", "100px"));
Adjust the width whatever fits best in you case.