Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
[Touchkit]: Grid incorrectly aligned
I started with the default Touchkit archetype and modified one tab to display a grid:
public class TestGrid extends NavigationView {
@Override
public void attach() {
super.attach();
setSizeFull();
VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
Grid grid = new Grid();
grid.setWidth("400px");
grid.setHeightMode(HeightMode.ROW);
grid.setSelectionMode(Grid.SelectionMode.NONE);
grid.addColumn("name", String.class);
grid.addColumn("length", Integer.class);
grid.addColumn("strength", Integer.class);
for (int i = 0; i < 100; i++) {
grid.addRow("Nicolaus", 1473, 1543);
grid.addRow("Galileo", 1564, 1642);
grid.addRow("Johannes", 1571, 1630);
}
setContent(grid);
}
}
Then I added it to the initial TabView:
NavigationView gridSample = new TestGrid();
navigationManager.setCaption("Grid");
navigationManager.setCurrentComponent(gridSample);
The problem is that the Grid is missaligned. The scrolllbar is on top, and below the scrollbar is the Grid component.
If I do the same with the Table class, it works as expected.
What is the problem with the Grid component, what might I be missing?
Hi,
Grid is not designed to work with Vaadin TouchKit. It should be possible to use Grid with TouchKit as well, but you'd need to included the Grid related CSS somehow to your TouchKit theme. I think I saw a thread on the forum where somebody had done something like this. Try searching with TouchKit and Grid and you should find that thread.
cheers,
matti