Dialog directives not functioning as expected when opening a dialog template with a set height

[dflo]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The elements inside a dialog template should be aligned/pinned correctly when a dialog is opened with a specified height.

• An element decorated with the mat-dialog-title directive should be pinned to the top
• An element decorated with the mat-dialog-actions directive should be pinned to the bottom

What is the current behavior?

• A dialog is opened with two visible scroll bars

  one scrolls through title and content, other scrolls through content and actions

• A dialog is opened with only one visible scroll bar, but behaves the same as the scenario above.
• A dialog is opened with a single scroll bar and scrolls normally but the title and actions buttons are not pinned.
• A dialog is opened that is taller than its content and the action buttons are not pinned to the bottom.

What are the steps to reproduce?

StackBlitz from Angular Material's Dialog documentation.

A dialog is opened with a template the uses the directives and sets a custom height 350px.

An edited StackBlitz to show a different scenario.

A dialog is opened with a template the uses the directives and sets a custom height that is bigger than the content.

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

The existing behavior is not consistent and does not display the expected behavior described in the documentation.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

package	version
angular	6.0.7
material/cdk	6.3.3
typescript	2.7.2

browsers	version
Chrome	67.0.3396.99 (64-bit)
Firefox	61.0.1 (64-bit)

Is there anything else we should know?

[jelbourn]

It looks like that example has some issues, but the dialog directives are working as designed. They're intended to provide the styling for that region of the dialog, but don't "stick" to the top bottom so that developers have some flexibility about how they're placed.

@crisbeto can you look at that example?

[crisbeto]

This has been an issue for a while. I have #9236 that should sort most of these out and allow us to make the buttons stick to the bottom.

[dflo]

@jelbourn I was under the impression that the directives would also "stick" the title to the top as described in the API docs and similar behavior would apply to the dialog actions.

But I look forward to @crisbeto's changes going through.

[devversion]

We need to re-audit this when we land our first MDC-based dialog prototype: #19038, #16254 (linking for later reference).

[amysorto]

Verfied that is working correctly in the MDC dialog

[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.}