cssgridresizevaadin23

Cannot resize the grid in my Vaadin application

My Vaadin application contains just 2 parts

  1. Horizontal layout containing banner and several buttons;

  2. Vertical layout with a grid. It is working as expected (mostly) but my problem that grid, containing over 2000 rows displays only three rows regardless of the window size. Here is screenshot of it: enter image description here I want it to occupy the whole page but nothing I was doing produce any effect on the grid size. Here is my class:

    public class TableLayout extends VerticalLayout {

    // some variables public TableLayout() { this.addClassName("book-table"); this.setSizeFull(); registrations = new ArrayList<>(); createBooksTable(); }

    private void createBooksTable() {
    this.booksTable = new Grid<>();
    this.booksTable.setWidth("100%");
    this.booksTable.setMinHeight("100%");
    this.yearRenderer = new HitYearRenderer();
    this.booksTable.addColumn(this.yearRenderer).setHeader("Год").setWidth("8%");
    this.booksTable.addColumn(new NewTagRenderer()).setWidth("60px");
    this.booksTable.addColumn(new AuthorListRenderer()).setHeader("Автор(ы)").setAutoWidth(true);
    this.booksTable.addColumn(new TitleRenderer()).setHeader("Произведение").setWidth("50%");
    this.booksTable.addColumn(new RatingRenderer()).setHeader("Оценки").setAutoWidth(true);
    this.booksTable.addColumn(new ReaderRatingRenderer()).setAutoWidth(true);
    this.booksTable.addColumn(new StatusRenderer()).setHeader("Статус").setAutoWidth(true);
    this.booksTable.setItemDetailsRenderer(new BookDetailsRenderer());
    this.booksTable.addThemeVariants(GridVariant.LUMO_COMPACT);
    this.booksTable.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
}
// some other code

    }

and here is what my css file say:

.book-table {
width: 98%;
min-height: 100%;
background-color: whitesmoke
}

I did try setting 100% for the minHeight instead of full size. No effect at all. Can someone please tell me what else I can do to increase the table height.

Solution

  • It's not possible to know given the code you have shared but looks like you have a Grid with a height of 100% inside a VerticalLayout with a height of 100%. So the Grid is 100% of its parent, which is 100% of its parent, which is unknown here. Thus you need to make sure the parent of TableLayout is not limiting the total height of the Grid. This should be easy to check with the help of the browser developer tools.

    As an aside, you are setting the height of the component both in Java code (which goes to modify the style attribute of the element) and in CSS. This shouldn't affect the outcome in your case, but you should usually limit yourself to doing sizing in one place.