Skip to content

bug(Sidenav+Tabs+Drag n drop): Drag scroll not working if Sidenav-Content height set to 100vh #18737

Closed
@KlausHans

Description

@KlausHans

Reproduction

https://stackblitz.com/edit/angular-ebzjz5?file=src%2Fapp%2Fexpansion-overview-example.html

Steps to reproduce:

  1. Put a mat-accordion with drag n drop inside a mat-tab that is inside mat-sidenav-content.
  2. Set the height of mat-sidenav-content to 100vh, so all items of the sidenav are always visible. The mat-accordion overflows the 100vh with scroll due to a large amount of items in it.
  3. Try to drag an item from the list to a position that is not visible without scrolling. It won't scroll.

Expected Behavior

The view autoscrolls while draging the item to the bottom of the screen.

Actual Behavior

It doesn't autoscoll.

It does if i either delete the tab-group or if i delete the max-height of 100vh of the sidenav-content.
Please take a look at the stackblitz.

Environment

  • Angular: 9.0.5
  • CDK/Material: 9.1
  • Browser(s): all
  • Operating System (e.g. Windows, macOS, Ubuntu): all

A possible workaround could be to delete the height of 100vh and set items in the sidenav to a fixed position so they are always visible. Not testet though.

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions