MdDialog scroll in another context

[crtl]

feature request, proposal:

I dont want to scroll the md-dialog-content but the whole dialog so the scrollbar is outside of the dialog.

What is the expected behavior?

Scroll the entire dialog and not only the md-dialog-content.
I created a small example with the expected behaviour. You can find it here on codepen.

What is the current behavior?

md-dialog-content is scrolled inside the dialog.

What is the use-case or motivation for changing an existing behavior?

The developer should have to decide how the dialog is scrolled to match it with a specific use case.

Is there anything else we should know?

I've read in the changelog that there is a new ScrollStrategy API to affect the scrolling of overlays but I cannot find any documentation and the MdDialogConfig does not support the scrollStrategy option.

So it is possible to change the scrolling behaviour for the dialog at the current version?
If so then how?

[julianobrasil]

Have you try it without md-dialog-content like said this issue: #5002?

[crtl]

Sure, but md-dialog-container has its scrollbar inside the dialog and not outside.
Please look at the example I hope it clarifys what I mean.

[m98]

@crtl This repository is for Material 2, for questions related to Angular 1 Material, please fill issue here

[crtl]

@m98 this is not AngularJS related. I just used an AngularJS example to describe the targeted behaviour.

[julianobrasil]

@ctrl, if you put the content outside <md-dialog-content>, the dialog do not show any scrollbar inside. The bad news is that it's parent do not show it either 😹.

[m98]

@julianobrasil Cool! It's almost done 😄

it seems to be a bug, or maybe there is an option for this?

[julianobrasil]

I think that dialog was not planned to work with large contents outside md-dialog-content tag. You can try playing around with panelClass (the applied to the div that contains dialog) and backdropClass to see what do you get. Take a look in this @willshowell comment: #3239 (comment)

[m98]

@jelbourn If scrollable dialogs are not already planned I can take to do it.
Here is the expected behavior:

Maybe the user can activate it by setting a certain attribute, such as scrollable="true" then we can check if the content height is longer than the current dialog size, show light scroll for the content, and on the mobile devices user can use gesture to scroll.

[julianobrasil]

@m98, scrollable dialog are planned. You just have to put the content inside <md-dialog-content>:

What is not planned is something that looks like the example linked on the issue description (the vertical scrollbar in the backdrop panel instead of in the content part):

But I think it can be achieved with the using of backdropClass option.

[m98]

@julianobrasil scrolling whole dialog is not what material design says:

For scrollable lists of options, the dialog title remains pinned to the top. This ensures that a selected item remains visible with the title, regardless of the item’s position in the list. Otherwise, the title scrolls off with the content. Actions always remain in place when content scrolls. Dialogs are separate from the underlying parent material and do not scroll with it.
(source)

[crisbeto]

There's no plan for allowing the entire dialog to be scrollable out-of-the-box, because it doesn't match the Material spec. If you want scrollable content, you can style the dialog yourself or use md-dialog-content. I've been planning on spending some time refactoring the dialog to help with cases like #3239.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}