How to let the grid size to be dynamic

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
I’m working on a web app where there is a menu on the left to navigate in the website.
The user profile tab should show the list of payments and delivery points associated to the user. I can’t resize the border of the grid to be dynamic.
Furthermore, the content shown on the right, if is too large, it gets cut from the page.
What I want is a grid with the height necessary to display all rows and with the necessary width.
The code has this structure:

  • MainView (with an horizontalSplitPanel)
  • Left menu
  • Right menu (in that case, it’s the profile tab)
    [list]
  • Profile view
  • left layout
    [list]
  • user info

    [/list]
  • right layout
    [list]
  • grid with payment
  • grid with delivery points

    [/list]

    [/list]

Code of the right layout:

[code]
public class userListsLayout extends VerticalLayout {

private User user;

userListsLayout(User user){
    
    this.user = user;
    
    setSizeUndefined();
    
    paymentMethods();
    deliveryPoints();
    
}

private void paymentMethods(){
    
    Grid<Payment> payments = new Grid<>("Payment methods");
    
    payments.setItems(user.getPayment());
    payments.addColumn(Payment::getNomeMetodo).setCaption("Method name");
    payments.addColumn(Payment::getCredenzialiCensurate).setCaption("Credentials");
    
    // Render a button that deletes the data row (item)
    payments.addColumn(pmt -> "Delete",
        new ButtonRenderer<Payment>(clickEvent -> {
            user.removePayment((Payment) clickEvent.getItem());
            payments.setItems(user.getPayment());
                }));
    
    addComponent(payments);
    
}

private void deliveryPoints(){
    
    Grid<DeliveryPoint> deliveryPoints = new Grid<>("Delivery points");
    
    deliveryPoints.setItems(user.getDeliveryPoint());
    deliveryPoints.addColumn(DeliveryPoint::getCitta).setCaption("City");
    deliveryPoints.addColumn(DeliveryPoint::getVia).setCaption("Address");
    deliveryPoints.addColumn(DeliveryPoint::getCivico).setCaption("Street number");
    deliveryPoints.addColumn(DeliveryPoint::getCAP).setCaption("Postal code");
    
    // Render a button that deletes the data row (item)
    deliveryPoints.addColumn(delPnt -> "Delete",
          new ButtonRenderer<DeliveryPoint>(clickEvent -> {
              user.removeDeliveryPoint((DeliveryPoint) clickEvent.getItem());
              deliveryPoints.setItems(user.getDeliveryPoint());
        }));
    
    addComponent(deliveryPoints);
    
}

}
[/code]Results:


The problem of the profile info box to be cut happens, for example, on the display of my pc; on a bigger screen this is not a problem, of course. On a smartphone screen instead, ALL the infobox is hidden on the right (outside) of the page.
How can I resolve this?

EDIT:
I added payments.setHeightByRows(5); And I achieve my goal, but still I want to know if there is a general solution to dynamic set the size of the grid.