CODEWITHSUNDEEP
htmlangularangular-materialdialog
bensalerno
bensalerno

Reputation: 534

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

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:

What is happening

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?

Upvotes: 4

Views: 8601

Answers (3)

KARNAV PARGI
KARNAV PARGI

Reputation: 653

If it's Angular 17 and angular/material 17 then, Please add these two lines into styes.scss and check

// styes.scss

@use '@angular/material' as mat;

@include mat.core();

Upvotes: 0

Elmehdi
Elmehdi

Reputation: 1430

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
enter image description here

Upvotes: 1

bensalerno
bensalerno

Reputation: 534

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!

Upvotes: 4

Related Questions