(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 #5302 (comment)), 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 #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);

[mehmetgunacti]

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

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.