CODEWITHSUNDEEP
angularangular-cdk
mminnie
mminnie

Reputation: 152

How to size Angular CDK overlay backdrop when attaching to component

I want to have a CDK overlay over a specific component. I using flexibleConnectedTo() to position the content portion of the overlay correctly over the component. I cannot figure out how to have the overlay backdrop only cover the component instead of the entire page. The cdk-overlay-container class has CSS as 

pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;

I know I could override the CSS, however what I am looking for is an Angular CDK way of sizing the cdk-overlay-container to fit the boundaries of a component.

I read through the documentation, however I don't see a way to do this. Am I missing something from the docs?

Upvotes: 3

Views: 14610

Answers (2)

shubham gorde
shubham gorde

Reputation: 175

For MatDialog you can specify backdropClass separately using backdropClass property. Example:

const dialogRef: MatDialogRef<PopupDialogComponent, any> = this.dialog.open(
  PopupDialogComponent,
  {

    id: "dialog",
    width: "470px",
    height: "12rem",
    autoFocus: false,
    disableClose: true,
    backdropClass: 'Your-css-class-for-backdrop',
    data: {
      isDeleteWorkcell: true,
      ErrorMessage: "",
      deleteMsg: "Permanently remove from “Shared with me”?",
      deleteHeader: "Remove Sharing",
      deleteBtnTxt: "Yes, remove"
    }
  }
);

Upvotes: 0

Nelu B
Nelu B

Reputation: 287

An Angular CDK way of sizing cdk-overlay-container is to provide your custom css class to OverlayConfig, there is backdropClass and panelClass properties.

 let overlayRef = this.overlay.create({
     backdropClass: 'your-custom-overlay-class',
     panelClass: 'your-custom-panel-class'
 });

Upvotes: 5

Related Questions