Grid is not displayed properly

Can someone please help me with this issue?

I have a view with a button and a grid and the grid is not displying properly.

Screenshot from application attached.

Code:


// Constructor
public MyBudgetsView(BudgetService budgetService, SecurityService securityService) {
    this.budgetService = budgetService;
    this.securityService = securityService;

    this.configureGrid();
    this.updateList();

      Button expenseButton = new Button("Kosten einreichen");
      expenseButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

      add(expenseButton);
      add(this.budgetGrid);

  }

// configureGrid method
private void configureGrid() {
    this.budgetGrid = new Grid<>(Budget.class);
    this.budgetGrid.setSizeFull();
    this.budgetGrid.removeAllColumns();

    this.budgetGrid.addColumn(Budget::getName);
    this.budgetGrid
        .addColumn(
            budget -> budget.getParentBudget() == null ? "" : budget.getParentBudget().getName())
        .setHeader("Hauptbudget");
    this.budgetGrid
        .addColumn(
            budget -> {
              List<User> budgetResponsible = budget.getBudgetManagers();
              if (budgetResponsible.size() == 1) {
                return budgetResponsible.get(0).getUsername();
              }
              return budgetResponsible.get(0).getUsername() + " +" + (budgetResponsible.size() - 1);
            })
        .setHeader("Budgetmanager");
      this.budgetGrid.addColumn(budget -> this.budgetService.budgetAsString(this.budgetService.getTotalBudget(budget)) + " €")
              .setHeader("Gesamtbudget");

      this.budgetGrid.addColumn(budget -> this.budgetService.budgetAsString(this.budgetService.getSpentBudget(budget)) + " €")
              .setHeader("Ausgaben");


      this.budgetGrid.getColumns().forEach(column -> column.setAutoWidth(true));
  }

image.png

// updateList method
private void updateList() {
    PrincipalUser principalUser = (PrincipalUser) this.securityService.getAuthenticatedUser();


      this.budgetGrid.setItems(this.budgetService.findBudgetsByResponsibility(((PrincipalUser)this.securityService.getAuthenticatedUser()).getUser()));
  }

I can assure (by debugging output) that at Grid#setItems the collection contains at least one item.

Apply height to your grid

I applied a min height of 100 px and it is displayed in full.
But I do not understand why I need to because in every other grid i did not do that

It has to do with the container where the grid is placed into, you probably have something like setHeight on your other views or using addAndExpand or other flex means

No i do not

There are also differences between HL and VL in this regard (the flex-direction makes a difference), which might explain why it works in other views without a defined height. (I won’t bore you with the details, but it’s CSS/flexbox related more than Vaadin specific)

TL;DR: 100% of undefined is nothing, so make sure you have a defined height for every single layout in the hierarchy between your Grid and the UI root element.
This is advisable even in situations where you don’t currently have issues, as they might break when you change some seemingly minor detail later.

Okay thank you :+1:

setMinHeight() does the trick, setHeight() does not (in my case)

I did

Bit the Grid is still not expanding, when more items are displayed

I don’t have an example by hand, but I know it’s possible to have an auto expanding grid based on flex layout and flex grow.

oh wait, do you want the Grid to only be as tall as needed for the items in it, and then expand vertically when more items are added? (I don’t think anything like that was mentioned earlier) (Or did I just mis-interpret the last 2 comments?)

Anyway it would be helpful to see your dom structure all the way from the page root to that Grid. You could post a screenshot of the devtools dom inspector in your browser.

Sorry for the late response, I did not see your message.

Yes exactly. In every other case, the grid is always as big as the items in the grid need the space.

In this particular case, the grid is just as small as it can be and it does not expand when more items are added.

I am not really sure what you mean by that.

ok then you should be using setAllRowsVisible(true); instead of setSizeFull. AllRowsVisible-mode basically makes the Grid as tall as, well, all the rows, instead of scrolling. If you need a min or max height that the height should stay within, you can set one with setMinHeight / setMaxHeight.