[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