Dropdown Selection List Not Anchored When Scrolling

Radzen Studio Angular
1

Good Afternoon Radzen team, I am testing the Radzen dropdown and have stumbled onto unexpected behavior. In some cases, scrolling with the mouse wheel can cause the selection list of a dropdown component to float up and down on the page.

To reproduce:

Radzen v2.32.1 with Angular project, and Chrome v78. (Not tested in other browsers.)

I have seen this issue present when I have a page with a datagrid. The item count on the datagrid must exceed the height of the page so vertical scrolling is possible.

An edit page must then be opened and presented as a dialog box. Of course, the edit page must contain a dropdown component.

Side note: When the edit dialog is open, mouse wheel events still cause the datagrid to scroll in the background. This behavior seems unexpected.

Next, click a dropdown to present a list of items to select. While the mouse is over the list, scrolling up and down with the mouse wheel works as expected.

Leave the selection list open and move the mouse to the side, over the labels for example. Scrolling with the mouse wheel will cause the datagrid in the background to scroll and also drag the dropdown list with it. The dropdown control itself remains in the correct position.

Thank you for your time and effort.

2

You can fix that by adding the following CSS to client\src\styles.css:

.no-scroll {
  overflow: hidden;
  padding-right: 15px;
}

We will include this fix in the official release next week.

3

Adding no-scroll to styles.css does fix the problem. Thanks.

4

Hi @korchev, we have the same problem in Blazor Server with the page scrolling when the user scrolls in a dropdown. We tried the above solution with no success, trying adding it in styles.css and directly as an attribute to a dropdown-component in Radzen as well.

5

Please provide more details and start a new thread in the right category.