(Feature Request) MdDialog: Define a class for global overlay wrapper

In MdDialog we can define in configs a class for overlay panel(panelClass) and backdrop(backdropClass), but we can not define a class for the wrapper.

The existent parameters are not enough to customize the dialog. Can we have a new parameter like wrapperClass for .cdk-global-overlay-wrapper?

[greg-md]

@josephperrott For a login/registration like dialog, on small windows, I don’t want a scroll inside the panel, but I want a window scroll for that panel. I know this feature will not be implemented in material, because of Material spec(see https://github.com/angular/material2/issues/5302#issuecomment-312906868), but there are cases when you need it.

For such panels I can not just change the .cdk-* styles globally, because they are used for other components too, and they may become broken. So, I have to specify custom classes for panels that needs that feature.

Right now, as a workaround, I’m using the private property _overlayRef to set that class:

this.dialogRef = this.dialog.open(component, {
  panelClass: 'dialog-panel',
  backdropClass: 'dialog-backdrop',
});

// @TODO Hack. Needs to be refactored, because it uses a private property.
if (this.dialogRef['_overlayRef'].overlayElement) {
  this.dialogRef['_overlayRef'].overlayElement.parentElement.className += ' dialog-wrapper';
}

And styles to make panel scrollable in window:

.cdk-global-overlay-wrapper.dialog-wrapper {
  overflow: auto;
  pointer-events: auto;
}

.cdk-overlay-backdrop.dialog-backdrop {
  position: fixed;
}

.cdk-overlay-pane.dialog-panel {
  margin: auto;
}

[greg-md]

@svenkeeter Looks like the backdrop was moved out from the dialog wrapper. You can manually move it back for these purposes:

const overlayEl = this.dialogRef['_overlayRef'].overlayElement;
overlayEl.parentElement.className += ' dialog-wrapper';
// Move backdrop back into the wrapper container
overlayEl.parentElement.insertBefore(overlayEl.parentElement.previousElementSibling, overlayEl);