Grid nested in horizontal layout generated, but not displayed completely

Question

I am trying to put vertical layout next to grid within one horizontal layout.

public class SprinklerDetailUI extends VerticalLayout {

    private final VerticalLayout nozzleDetailLayout;
    private final TextField nozzleName;
    private final TextArea nozzleDescription;
    private final TextField fitForSprinkler;

    private final Grid<FlowSetEntity> flowGrid;
    private final HorizontalLayout nozzleFlowLayout;

    private final Nozzle nozzle;

    List<FlowSetEntity> flowSetEntities = Stream.of(new FlowSetEntity(10, 4),
            new FlowSetEntity(10, 4),
            new FlowSetEntity(23, 35),
            new FlowSetEntity(534, 10),
            new FlowSetEntity(654, 53))
            .collect(Collectors.toList());

    public SprinklerDetailUI() {

        this.nozzleName = new TextField("Nozzle name");
        this.nozzleDescription = new TextArea("Description");
        this.fitForSprinkler = new TextField("Fit for sprinkler");
        this.nozzleDetailLayout = new VerticalLayout(nozzleName, nozzleDescription, fitForSprinkler);

        this.nozzle = new Nozzle();
        nozzle.setFlowSet(flowSetEntities);

        this.flowGrid = new Grid<>(FlowSetEntity.class);
        flowGrid.setColumns("pressure", "flowRate");
        flowGrid.setItems(nozzle.getFlowSet());
        flowGrid.setSizeFull();

        this.nozzleFlowLayout = new HorizontalLayout(nozzleDetailLayout, flowGrid);
        nozzleFlowLayout.setSizeFull();
        add(nozzleFlowLayout);
    }
}

FlowSetEntity.class

@Entity
@Getter
@Setter
@NoArgsConstructor
public class FlowSetEntity implements Comparable<FlowSetEntity> {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private double pressureInAtm;

    private double flowRateInLPM;

    @Transient
    private Quantity<Pressure> pressure;

    @Transient
    private Quantity<FlowRate> flowRate;

    @ManyToOne(optional = false)
    private Nozzle nozzle;

    public FlowSetEntity(double pressureInAtm, double flowRateInLPM) {
        this.pressureInAtm = pressureInAtm;
        this.flowRateInLPM = flowRateInLPM;
        this.pressure = toAtm(pressureInAtm);
        this.flowRate = toLPM(flowRateInLPM);
    }

    @Override
    public int compareTo(FlowSetEntity o) {
        int pressureCompare = Double.compare(this.pressureInAtm, o.pressureInAtm);
        int flowCompare = Double.compare(this.flowRateInLPM, o.flowRateInLPM);
        return pressureCompare != 0 ? pressureCompare : flowCompare;
    }
}

Generated page looks like this:

browser view

I seems that grid structure is generated correctly, but for some reason it is not displayed completely. When displaying same grid in vertical layout everything is fine.

Answer 1

Based on that UI code my guess is you're simply lacking a height on the outermost VerticalLayout. That means the height of the HorizontalLayout inside it, and the Grid inside that, is set to be 100% of nothing.

The form next to the Grid renders correctly because it doesn't define a height, and the containing HorizontalLayout gets an intrinsic height to accommodate that form, but the 100% on the Grid is still evaluated against the defined height which is missing, because css.