Mat-Dialog opening at bottom of page rather than a pop-up window?

Question

I am trying to use a Mat-Dialog to open a pop-up, but it's appearing at the bottom of the page.

I tried every solution in both these pages:

Modal/Dialog is opening at the bottom of the screen, and not behaving properly

And neither of them worked properly. My code looks like this

TS

@Component({
  selector: 'cardboxes-linkboxes',
  templateUrl: './cardboxes.component.html',
  styleUrls: ['./cardboxes.component.scss']
})
export class CardboxesComponent implements OnInit {

  constructor(private dialog: MatDialog) { }

  ngOnInit() {}

  openDialog() {
    this.dialog.open(Description)
  }
  
}

@Component({
  selector: 'app-description-dialog',
  templateUrl: './description-dialog.component.html'
})

export class Description {

  constructor(public dialogRef: MatDialogRef) {}

  onNoClick(): void {
    this.dialogRef.close()
  }

}

Styles.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

index.html

angular.json

"styles": [
              "src/styles.scss",
              {
                "input": "node_modules/@angular/material/prebuilt-themes/purple-green.css"
              }
]

I also have both components added to the entry components of @ngmodule in the app.module file

These are mostly suggestions from the other questions, but it is still rendering at the bottom of the page, like so:

As you can see the dialog is at the bottom of the page underneath my background image. I want it over the page in a pop-up manner.
Is there something that I am doing wrong that would allow this to work properly?
How can I make my popup appear in the center of my page?

user_11864837 · Answer

I found the solution. I ended up changing my openDialog() function a bit like this example I found online.

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      height: '300px'
    });

Doing this combined with everything above worked. Thanks team!

user_6518546 · Answer

You can always inspect your page by clicking F12 to view your html and css and see if something is wrong with them:
1- click in the selection icon
2- then click on the element you want to inspect
3- you have all the css related to that element

Mat-Dialog opening at bottom of page rather than a pop-up window?

2 Answers