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?
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!