title: Mat-Dialog opening at bottom of page rather than a pop-up window?
body: <p>I am trying to use a Mat-Dialog to open a pop-up, but it's appearing at the bottom of the page.</p>
  <p>I tried every solution in both these pages:</p>
  <p><a href="https://stackoverflow.com/questions/48481733/matdialog-doesnt-open-as-dialog">matDialog doesn&#39;t open as dialog</a></p>
  <p><a href="https://stackoverflow.com/questions/44163721/modal-dialog-is-opening-at-the-bottom-of-the-screen-and-not-behaving-properly">Modal/Dialog is opening at the bottom of the screen, and not behaving properly</a></p>
  <p>And neither of them worked properly. My code looks like this</p>
  <p><strong>TS</strong></p>
  <pre><code>@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&lt;Description&gt;) {}
  
    onNoClick(): void {
      this.dialogRef.close()
    }
  
  }
  </code></pre>
  <p><strong>Styles.scss</strong></p>
  <pre><code>@import '~@angular/material/prebuilt-themes/indigo-pink.css';
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&amp;display=block&quot; rel=&quot;stylesheet&quot;&gt;
  </code></pre>
  <p><strong>angular.json</strong></p>
  <pre><code>&quot;styles&quot;: [
                &quot;src/styles.scss&quot;,
                {
                  &quot;input&quot;: &quot;node_modules/@angular/material/prebuilt-themes/purple-green.css&quot;
                }
  ]
  </code></pre>
  <p>I also have both components added to the entry components of @ngmodule in the app.module file</p>
  <p>These are mostly suggestions from the other questions, but it is still rendering at the bottom of the page, like so:</p>
  <p><a href="https://i.stack.imgur.com/5stgi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5stgi.jpg" alt="What is happening" /></a></p>
  <p>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.<br />
  Is there something that I am doing wrong that would allow this to work properly?<br />
  How can I make my popup appear in the center of my page?</p>