Is there a size restriction on the content area for AppLayout? I created an App using Start.Vaadin.com and the Dashboard View is not displaying beyond a certain vertical size. The vertical scrolling is working but it seems to be cropping the bottom part of the content area.
When I run the app in the debugger, it works and allows me to scroll to the bottom, but never in production mode.
And the capture, or example code ? 
Here is the code from the constructor:
public class OperationalView extends Main {
private OperationalDataService operationalDataService;
private OperationalMetricService operationalMetricService;
Map<String, List> filters = FilterHelper.emptyFilters();
LocalDate start = LocalDate.of(2024, 1, 1);
LocalDate end = LocalDate.of(2024, 12, 31);
Map<String, MultiSelectComboBox> filterComponents = new HashMap<>();
public OperationalView(@Autowired OperationalDataService operationalDataService, @Autowired OperationalMetricService operationalMetricService) {
this.operationalDataService = operationalDataService;
this.operationalMetricService = operationalMetricService;
addClassName("billing-view");
Board board = new Board();
// Filters
board.addRow(filterComponent());
// Key Metrics
board.addRow(
createHighlight("Service Events", this.operationalMetricService.serviceEventCount(filters, start, end).toString(), "pill"),
createHighlight("Clients", this.operationalMetricService.clientCount(filters, start, end).toString(), "contrast pill"),
createHighlight("TBD", "NA", "error pill"),
createHighlight("TBD", "NA", "contrast pill")
);
// Charts
board.addRow(operationalTurnaround("Per Diem"), operationalTurnaround("Waiver"));
// Timeline
board.addRow(dailyServiceLog());
// Tables
board.addRow(authorizations("Per Diem"), authorizations("Waiver"));
add(board);
}
I don’t think I can help you much, but did you use the Scroller component ?
insert inside the components that you want to Scroll
Although, that Board, I think, is very responsive, I have never used it.
Scroller doesn’t work. Also, the AppLayout should be handling it with a built-in scrolling but there is no clear documentation.
Hi,
I don’t know why you’re extending Main, or what you have in Main, but I would recommend you try extending Div instead. Hopefully that could do it.
From:
public class OperationalView extends Main {
to:
import com.vaadin.flow.component.html.Div;
public class OperationalView extends Div {
Main is just a Div with semantics identifying it as the main content area of the UI – this is correct usage of Main and actually better than Div for accessibility. In terms of rendering, it is identical to Div.
AppLayout does not provide any scrolling out of the box. The page root does supply scrolling of however, and in many cases the content placed into the default slot of AppLayout scrolls correctly thanks to that, but that depends on many other factors such as the height applied to both the content and the entire layout stack between it and the page root. In other words, it can easily be broken by various details. I would definitely recommend a Scroller (set to 100% height and width) for achieving a reliable scroll area. The view itself should also be set to 100% size.
I changed the GridPro to Grid and everything started working now.
I was using a 2 instances of GridPro in the last row of the Board. I changed it to Grid and it started working. I will research later why this is.
Thank you for the explanation, I was unaware. Could you please point me to where I can find docs mentioning this sort of thing?
The docs I found:https://vaadin.com/docs/latest/
are more like a guide, rather than documentation of what the methods available are, or what classes there is, or your explanation for example.
The full Java API reference can be found here: https://vaadin.com/api/platform/24.6.1/index.html
Main and Div are just Java APIs for native HTML elements. A list of such can be found here: https://vaadin.com/docs/latest/flow/create-ui/standard-html.
Although both of those really just tell you which HTML elements those classes represent, so you’re kind of expected to know what those HTML elements are, or find that information elsewhere, as it would be quite impossible for Vaadin’s documentation to cover all of HTML as well.
MDN is a pretty good reference for HTML though: <main>: The Main element - HTML: HyperText Markup Language | MDN
