Grid nested in horizontal layout generated, but not displayed completely - spring

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.