Hello fellow Vaadin users.
I am currently teaching myself Vaadin 14 by tinkering a bit with a Rasperry PI.
The project uses a small sensor for motion detection.
To control the whole thing, i created a Vaadin Flow GUI (it is still in a very early testing stage without actual hardware interaction).
For the settings page i wanted to make some kind of table-like structure in which every row shows a certain option, a current state and a button or other component to manipulate it. My problem is, that i can’t get the grid element to expand its size to show all colums of the grid at once without a scrollbar.
To be a bit more specific, here are some details about the setup:
The main view element hosts a tab element which enables/sets the visibility of some div elements. One of those div elements is the settings element which has a vertical layout and holds the grid itself.
The structure looks like this:
Mainview
VerticalLayout
Tabs
StatusDiv
VerticalLayout
Grid
SettingsDiv
InfoDiv
LoginDiv
The settings div has the following view setup code:
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(Alignment.CENTER);
add(layout);
H2 heading = new H2("Einstellungen");
layout.add(heading);
Label infoLabel = new Label("Hier ist die Einstellungen Seite.");
layout.add(infoLabel);
layout.setWidthFull();
List<SimpleGridComponentTriple> gridItems = new ArrayList<SimpleGridComponentTriple>();
gridItems.add(new SimpleGridComponentTriple(new Label("Test1"), new Label("Test1"), new Label("Test1")));
gridItems.add(new SimpleGridComponentTriple(new Label("Test2"), new Label("Test2"), new Label("Test2")));
gridItems.add(new SimpleGridComponentTriple(new Label("Test3"), new Label("Test3"), new Button("Test3")));
Grid<SimpleGridComponentTriple> grid = new Grid<>();
grid.setItems(gridItems);
grid.addComponentColumn(SimpleGridComponentTriple::getFirst).setHeader("Option").setFlexGrow(0);
grid.addComponentColumn(SimpleGridComponentTriple::getSecond).setHeader("Status").setFlexGrow(0);
grid.addComponentColumn(SimpleGridComponentTriple::getThird).setHeader("Aktion").setFlexGrow(0);
grid.setSelectionMode(SelectionMode.NONE);
layout.add(grid);
grid.setWidth("100%");
grid.setWidthFull();
grid.setHeightByRows(true);
For testing the row entries, i created a SimpleGridComponentTriple class which lets my put differnt kinds of components in each field of the grids row.
public class SimpleGridComponentTriple {
private Component first;
private Component second;
private Component third;
public SimpleGridComponentTriple(Component first, Component second, Component third) {
if (first == null) {
first = new Label(" ");
}
this.first = first;
if (second == null) {
second = new Label();
second.setVisible(false);
}
this.second = second;
if (third == null) {
third = new Label();
third.setVisible(false);
}
this.third = third;
}
public Component getFirst() {
return first;
}
public Component getSecond() {
return second;
}
public Component getThird() {
return third;
}
}
I hope this all helps to understand the setup.
Does someone have a hint on how to get the grid to auto-adjust the width to the needed space to show all of its elements?
Currently it only shows a grid as wide as the label above it.
Any help would be very much appreciated.
Greetings to all of you
Alexander