Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Totati opened this issue Jan 24, 2023 · 12 comments · Fixed by #31037
Closed

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

Totati opened this issue Jan 24, 2023 · 12 comments · Fixed by #31037
Labels
area: cdk/drag-drop docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Totati
Copy link
Contributor

Totati commented Jan 24, 2023

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
@Totati Totati added docs This issue is related to documentation needs triage This issue needs to be triaged by the team labels Jan 24, 2023
@wagnermaciel wagnermaciel added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/drag-drop good first issue This issue is a good place to start for first time contributors to the project and removed needs triage This issue needs to be triaged by the team labels May 15, 2023
@Aditya-13
Copy link

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

@Totati
Copy link
Contributor Author

Totati commented May 26, 2023

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

@simonzea
Copy link

simonzea commented Aug 3, 2023

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

@simonzea
Copy link

simonzea commented Aug 3, 2023 •
edited
Loading

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.

@simonzea simonzea mentioned this issue Aug 3, 2023
Open
simonzea added a commit to simonzea/material.angular.io that referenced this issue Aug 3, 2023
@simonzea
fix: auto scroll is not working on devices narrower than 721px(angula…
fa576dc 
…r#1219)

The flex-basis in the class docs-component-viewer-sidenav-container property was creating problems with the scroll bar in the page https://material.angular.io/cdk/drag-drop/examples for small devices.

Fixes angular#1219 and angular/components#26476
@simonzea simonzea mentioned this issue Aug 3, 2023
Open
@Xender007
Copy link

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
Copy link
Contributor Author

Totati commented Jan 15, 2024

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

@GiftLanga
Copy link
Contributor

@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.
image

@simonzea was your fix merged for release?

@abonvalle
Copy link

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

@Totati
Copy link
Contributor Author

Totati commented May 21, 2024 •
edited
Loading

I can reproduce it in 17.3.6 and 18.0.0

@sunnyallana
Copy link

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

@yousafravian
Copy link
Contributor

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

yousafravian added a commit to yousafravian/components that referenced this issue May 6, 2025
@yousafravian
fix(docs): Automatic scrolling fails on screens smaller than 721px du…
3c65252 
…e to flexbox behavior

Fixes a flexbox issue where if a flex item has `flex-basis: auto` and `min-height: auto`, it exceeds the height of its flex parent. Consequently, when `scrollBy` is called by `scrollDetector` in `drop-list-ref.ts`, the container is not scrollable because its height is determined by its content. Removing `min-height: auto` forces the flex item to match the height of its flex parent, allowing `scrollBy` to function correctly.

Fixes angular#26476
@yousafravian yousafravian mentioned this issue May 6, 2025
Merged
@yousafravian
Copy link
Contributor

Here is a PR for the fix
#31037

crisbeto pushed a commit that referenced this issue May 6, 2025
@yousafravian @crisbeto
fix(docs): Automatic scrolling fails on screens smaller than 721px du…
0530274 
…e to flexbox behavior (#31037)

Fixes a flexbox issue where if a flex item has `flex-basis: auto` and `min-height: auto`, it exceeds the height of its flex parent. Consequently, when `scrollBy` is called by `scrollDetector` in `drop-list-ref.ts`, the container is not scrollable because its height is determined by its content. Removing `min-height: auto` forces the flex item to match the height of its flex parent, allowing `scrollBy` to function correctly.

Fixes #26476

(cherry picked from commit 8cf7615)
crisbeto pushed a commit that referenced this issue May 6, 2025
@yousafravian @crisbeto
fix(docs): Automatic scrolling fails on screens smaller than 721px du…
02a893a 
…e to flexbox behavior (#31037)

Fixes a flexbox issue where if a flex item has `flex-basis: auto` and `min-height: auto`, it exceeds the height of its flex parent. Consequently, when `scrollBy` is called by `scrollDetector` in `drop-list-ref.ts`, the container is not scrollable because its height is determined by its content. Removing `min-height: auto` forces the flex item to match the height of its flex parent, allowing `scrollBy` to function correctly.

Fixes #26476

(cherry picked from commit 8cf7615)
wildcardalice pushed a commit to wildcardalice/components that referenced this issue May 12, 2025
@yousafravian @wildcardalice
fix(docs): Automatic scrolling fails on screens smaller than 721px du…
cc79b4b 
…e to flexbox behavior (angular#31037)

Fixes a flexbox issue where if a flex item has `flex-basis: auto` and `min-height: auto`, it exceeds the height of its flex parent. Consequently, when `scrollBy` is called by `scrollDetector` in `drop-list-ref.ts`, the container is not scrollable because its height is determined by its content. Removing `min-height: auto` forces the flex item to match the height of its flex parent, allowing `scrollBy` to function correctly.

Fixes angular#26476
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: cdk/drag-drop docs This issue is related to documentation good first issue This issue is a good place to start for first time contributors to the project P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(docs): Automatic scrolling fails on screens smaller than 721px yousafravian/components
9 participants
@simonzea @Totati @wagnermaciel @yousafravian @abonvalle @Xender007 @GiftLanga @sunnyallana @Aditya-13