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

[greg-md]

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?

[josephperrott]

The overlay wrapper is meant to be used for positioning the overlay. Can you explain what you are wanting to customize that you are not currently able to?

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

[willshowell]

@greg-md it sounds like https://github.com/angular/material2/issues/4612 might be more suitable than trying to change all the classnames.

[greg-md]

@willshowell Hm, but it's a more complicated approach.

[svenkeeter]

@greg-md The solution you mentioned worked. However when i click on the backdrop the dialog doesn't close. Is there a way to accomplish this?

[greg-md]

@svenkeeter I've also seen this issue in the last versions. Didn't have time to find a fix yet. If I will find one, ill write it here.

[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);

[msegmx]

Same problem here; to make the component scroll, the wrapper div's "overlay-y" property has to be set, but I can't reach that div.

Overriding cdk-global-overlay-wrapper might work for one but might break things on another page.

Is there a solution to this (without hacking it)?

[RedEars]

Same here. Setting "pointer-events: all" to the global .cdk-global-overlay-wrapper class, prevents clicking items when a snackBar is shown. So thats not an option. We need the ability to add a custom class without hacking it

@greg-md The workaround works, thanks for that