docs-bug(cdkDrag): List examples' auto scroll is not working on devices narrower than 721px

[Totati]

trafficstars

Documentation Feedback

Dragging a list element of an example like connected sorting group and moving the item near the page border won't trigger auto scroll on pages narrower than 721px. Resize the page to 721px or wider and it will work again. Last time it worked seems to be in vesion 8 and it looks like it's caused by this flex-basis: auto property

Affected documentation page

https://material.angular.io/cdk/drag-drop/examples

[Aditya-13]

Hey @Totati , i think the issue is fixed now. You can check and close this issue.

[Totati]

@Aditya-13, I can reproduce it with version 16.0.2 still.

[simonzea]

@Totati hey, is anybody working on it ? Otherwise i can try to fix it if you dont mind.

[simonzea]

Hey ! what i found looking into this bug is that is no a problem whit angular material cdk but with the web page where is displayed (https://github.com/angular/material.angular.io). There is a media class call.

@media (max-width: 720px) .docs-component-viewer-sidenav-container { flex: 1 0 auto; }

and this is affecting the auto scroll, if we remove the auto property (flex-basis).

@media (max-width: 720px) .docs-component-viewer-sidenav-container { flex: 1 0; }

works as expected, i will try to create an issue and a pr there.

[Xender007]

I tried in 17.0.5 and It's working as expected. please check and close this issue. Let me know if you find anything else @Totati.

[Totati]

@Xender007 it's still not working for me, did you shrink your viewport?

[GiftLanga]

@Xender007 I was able to reproduce the bug on version 17.3.1

When I inspect I see that the css class hasn't been updated.

@simonzea was your fix merged for release?

[abonvalle]

@Totati Is it still not working? I couldn't reproduce and I didn't find the docs-component-viewer-sidenav-container class

[Totati]

I can reproduce it in 17.3.6 and 18.0.0

[sunnyallana]

The issue still exists in v19.0.5. Should I get on it?

[yousafravian]

@Totati The issue still exists in v19.2.11. Is someone working on it?

[yousafravian]

Here is a PR for the fix https://github.com/angular/components/pull/31037