Unable to swipe through Vaadin Dialog using a touchscreen device

I'm facing an issue with vertically scrolling a Vaadin Dialog that contains a VerticalLayout taller than the screen when using a touchscreen device. However, the Dialog scrolls normally on a desktop environment using the mouse wheel.

Here is the relevant 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 <vaadin-vertical-layout> nested inside is the element causing the vertical scroll problem when it exceeds the screen's height.

cssscrolldialogvaadintouchscreen

Answer №1

After thorough investigation, it was discovered that the issue lied within Vaadin 14.2.0. By upgrading to Vaadin 14.3.0, the scrolling functionality within the dialog box is now operating smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Issue: Incompatibility with CSS Webresources in Custom ASP Control Library

In my latest project, I created a Custom Control DLL that extends existing Telerik and ASP controls. As part of this process, I also introduced new CSS classes that utilize images. However, I encountered an issue where these images were not being loaded in ...

cssasp.netwebformstelerikwebresource.axd

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

Tips for preventing unstyled content flash when updating CSS files dynamically

The following jQuery function is used to replace CSS files: function UpdateTheme(theme) { var links = $("link"); var _t = theme; $.each(links, function (i, link) { var _h = $(link).attr('href'); _updatedHr ...

javascriptjqueryhtmlcss

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

javascriptjqueryhtmlcss

Dynamically add a Font Awesome icon to the background of an input text field with React and react-fa

Utilizing ReactJs and react-fa to access Font Awesome icons, I am attempting to dynamically place one of the icons inside a text input. The following is my code snippet: import React, { Component } from 'react'; import PropTypes from &a ...

javascripthtmlcssreactjsfont-awesome

Secure HTML / CSS for JavaScript? I am unable to modify certain attributes during runtime

Due to ongoing discussions about blog colors for business purposes, we are looking to provide users with a "tool" (for those who are tech-savvy) to experiment with colors themselves. Our blog is a basic Wordpress site with various plugins (such as Google ...

javascripthtmlcss

Is there a way to automatically clear the text field value after submitting?

Greetings everyone, I'm looking for guidance on removing the text field content once I click submit. I have a button labeled "senden" and my goal is to clear the text fields and uncheck the checkbox after clicking this button. I've attempted se ...

javascriptjqueryhtmlcss

The active navigation element is not displaying the CSS property when using PHP

Apologies for the vague title of this question, I found it difficult to express my issue in just one statement. So, here goes. Currently, I am enhancing my Personal Website and aiming to highlight the navigation element for the current page with a specifi ...

phpjqueryhtmlcss

Is there a different method to position an element in the center of the webpage?

Typically, the code margin:auto is used for centering, but I have a different code below. HTML : <article> <header></header> </article> CSS: article{ max-width: 500px; margin: auto; /* centered - nice */ } header{ width: ...

css

What is the best way to selectively add multiple classes to a single Material UI classes attribute based on certain conditions?

I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have ...

cssreactjsmaterial-ui

Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a meth ...

cssajaxupdateprogress

As the screen width shrinks, I've noticed that my grid system in HTML using Bootstrap starts to glitch

Why is my row going onto a second line when I shrink the width? Here is a screenshot of the issue. I am currently using bootstrap 5 for this and I am unsure how to fix it. Below is the code snippet: Current Screenshot Below is the desired look on mobil ...

htmlcssbootstrap-5

The concept of nested lists and the importance of z-indexing

I am in the process of creating a navigation menu for a website that includes submenus. However, I am encountering an issue with the submenu sliding down and not lying behind the main navigation as intended. I have attempted to use z-index to address this ...

htmlcss

Is your Facebook send button appearing strangely? Find out how to fix it here!

I recently integrated the Facebook send button on my website, allowing users to easily share information about each drive listed. However, a new issue has arisen where clicking on the send button opens a popup inside a table, negatively affecting the page& ...

phpjqueryhtmlcssfacebook

Struggling to make the background image appear full screen on the webpage despite implementing a script

Currently, I am in the process of developing a responsive landing page using Bootstrap 4 and I would like to implement a background that changes every few seconds. Although I have managed to make the images change dynamically, I am facing difficulties inco ...

javascripthtmlcssbootstrap-4

Restore original state on various elements using JavaScript

I recently asked a question about changing the height of images when clicking on them using vanilla JS. A helpful user named Butalin provided me with a working function, but there seems to be an issue - if I click on one image to change its height and then ...

javascripthtmlcssfor-loopif-statement

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js