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:

matDialog doesn't open as dialog

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<Description>) {}

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

}

Styles.scss

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

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

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?

Answer 1

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!