Search code examples
cssscrolldialogvaadintouchscreen

Cannot scroll Vaadin Dialog with touchscreen

I am unable to vertically scroll a Vaadin Dialog containing a VerticalLayout taller than the screen when using a touchscreen device; the Dialog scrolls normally in a desktop environment using the mouse wheel.

This is the interested HTML:

<vaadin-dialog-overlay id="overlay" focus-trap="" with-backdrop="" opened="" role="dialog" style="z-index: 201;">
  <flow-component-renderer appid="ROOT" nodeid="94" style="">
    <div class="draggable" style="width: 100%; height: 100%;">
      <vaadin-vertical-layout class="genericDialog" theme="padding spacing" style="width: 100%;">
        <vaadin-horizontal-layout class="titleDialog" theme="spacing">
          [stuff...]
        </vaadin-horizontal-layout>
        <vaadin-vertical-layout theme="padding spacing" style="width: 100%;">
          [stuff...]
        </vaadin-vertical-layout>
        <vaadin-horizontal-layout class="buttonsDialog" theme="spacing">
          [stuff...]
        </vaadin-horizontal-layout>
      </vaadin-vertical-layout>
    </div>
  </flow-component-renderer>
</vaadin-dialog-overlay>

The innermost <vaadin-vertical-layout> is the element taller than the screen.

Solution

  • It turned out that it was indeed a bug in Vaadin 14.2.0. I updated Vaadin to 14.3.0 and now the dialog scroll works fine.