AppLayout + VerticalLayout scrolling?

Flow
1

I have a route view that uses AppLayout and extends VerticalLayout. The constructor adds a bunch of fields, and the fields are not visible below the bottom of the screen using add(…). Is there a way make the content of the VerticalLayout scrollable?

@Route(value = “note/:document-id”, layout = MainAppLayout.class)
public class NoteViewImpl extends VerticalLayout implements BeforeEnterObserver, NoteView { … }

2

This should work out of the box

3

Can you show your constructor

4

public NoteViewImpl(final NoteController noteController) {

  this.noteController = noteController;

  //
  setWidth("100%");


  // Header
  add(header);

  // Form
  add(datePicker);
  add(agenda);
  add(organizer);
  add(counterpart);
  add(discussionPoints);
  add(decisionsMade);
  add(actionItems);
  add(feedback);
  add(shareCheckbox);

  // Control buttons
  add(new HorizontalLayout(saveButton, cancelButton));

  // Attach the controller
  this.noteController.attach(this);

}

5

I’m on Vaadin 24.3.4.

6

I’ve notices something strange. If there is vertical overflow at the view at the construction time, then the scroll is not working. If view is smaller than the browser window, and then I reduce the browser window size for the vertical overflow to start happening, the scrolling works. So it looks like there is some logic inside Vaadin that tries to figure out what’s visible and how it relates to the size of the vindow and disables / enable the scrolling.

7

Another discovery. When I put my laptop’s mouse pointer over a field, and use the scroll gesture, scrolling works. If I move the mouse pointer away from any elements on the page, scrolling stops working.

8

I can’t see anything problematic. Could you provide a reproducible example or share your code?

9

@adaptable-uakari After more experimenting, I don’t think this is Vaadin-related anymore. I see the same behavior in other apps. I