bug: scrolling issues with bottom sheet modal

[davideas]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Possibility to scroll content if this exceeds screen size only when bottom sheet is fully expanded and touched the max breakpoint.
Then, when finishing to scroll the content down and there's nothng to scroll anymore, the bottom sheet should be dragged again at lower breakpoint.

Describe the Use Case

Having longer content in bottom sheet, content that exceeds the screen height is not visible because container not scrollable.
It's even a real problem for smaller screens.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[averyjohnston]

Thanks for the issue. Could you replicate your use case in a starter app and post the link here? This sounds like it may just be a bug, so I want to make sure I'm following.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[davideas]

I created a quick sample project here: https://ionic-angular-action-sheet-g1wwzx.stackblitz.io
But it should be used in mobile view with any browser not desktop view! In desktop view, scrolling works, it is usable nicely with mouse wheel too, but the problem of course is on mobile view.
There, the touch creates issues when content is longer than the screen.

I saw a css property on <bottom-sheet-modal> element in ion-page class: overflow: hidden;
Well even modifying it or adding overflow to an internal div of the bottom sheet when touching the component it drag and scroll at same moment. That's why I suggest to activate overflow-y: auto only when max breakpont is reached.
When at lower breakpoints the touch should only drag the bottom sheet up and down without interferring with the scrolling of the content.

Could you please verify how we can scroll this content?

[averyjohnston]

Thanks! I see what you mean now. After investigation, it looks like the behavior you want exists on ion-content -- once the sheet modal is at its max breakpoint, any ion-content components inside get the scroll-y class, allowing scrolling. Could you try replacing the div.modal-content with ion-content and let me know if that looks how you would expect?

Either way, our documentation around this should be improved, since there isn't any example HTML for ModalPage in the usage examples (https://ionicframework.com/docs/api/modal#usage).