I have a vertical layout and a grid within it.
@Slf4j
public class AdminView extends VerticalLayout {
private final Grid<User> grid;
private final UserService userService;
private final RoleService roleService;
public AdminView(UserService userService, RoleService roleService) {
this.userService = userService;
this.roleService = roleService;
setSizeFull();
grid = generateGrid();
add(grid);
}
private Grid<User> generateGrid() {
Grid<User> userGrid = new Grid<>(User.class, false);
userGrid.addColumn(User::getUsername).setHeader("Username").setAutoWidth(true).setFlexGrow(0);
userGrid.addComponentColumn(user -> {
TextField textField = new TextField();
textField.setValue(user.getName());
textField.addKeyDownListener(Key.ENTER, event -> {
user.setName(textField.getValue());
userService.updateUser(user);
});
return textField;
}).setHeader("Name").setResizable(true).setAutoWidth(true).setFlexGrow(0);
userGrid.addComponentColumn(user -> {
MultiSelectComboBox<Role> comboBox = new MultiSelectComboBox<>();
comboBox.setItemLabelGenerator(Role::getRole);
comboBox.setItems(roleService.findAll());
comboBox.select(user.getRoles());
comboBox.addValueChangeListener(event -> {
user.setRoles(event.getValue());
userService.updateUser(user);
});
comboBox.setSelectedItemsOnTop(true);
return comboBox;
}).setHeader("Roles").setResizable(true).setAutoWidth(true).setFlexGrow(0);
userGrid.addComponentColumn(user -> {
Button deleteButton = new Button(VaadinIcon.TRASH.create(), event -> {
userService.deleteUser(user);
userGrid.setItems(userService.findAll());
});
deleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
return deleteButton;
}).setHeader("Delete").setWidth("5rem").setFlexGrow(0);
userGrid.setItems(userService.findAll());
userGrid.setAllRowsVisible(true);
userGrid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
userGrid.addClassName(LumoUtility.Width.AUTO);
userGrid.addClassName(LumoUtility.Flex.SHRINK);
userGrid.setMaxWidth("100%");
userGrid.addClassName(LumoUtility.Overflow.AUTO);
return userGrid;
}
}
This displays correctly on PC with big width, but on my phone its width exceeds phone width:
So my question is: how to make it never exceed browser width?