Mat dialog is opening in the end of my page without backdrop #15641
Description
What is the expected behavior?
Open the mat dialog in the middle of my page with backdrop
What is the current behavior?
It's openin in the end of my page without a backdrop
What are the steps to reproduce?
I click in <u (click)="mostraModalFormasPagamento()">Ver formas de pagamento</u>
mostraModalFormasPagamento(){
const dialogref = this.dialog.open(TabelaFormasPagamentoComponent)
}
This is the result:
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Package Version
@angular-devkit/architect 0.12.4
@angular-devkit/build-angular 0.12.4
@angular-devkit/build-optimizer 0.12.4
@angular-devkit/build-webpack 0.12.4
@angular-devkit/core 7.2.4
@angular-devkit/schematics 7.2.4
@angular/animations 7.2.11
@angular/cdk 7.3.6
@angular/cli 7.2.4
@angular/material 7.3.6
@ngtools/webpack 7.2.4
@schematics/angular 7.2.4
@schematics/update 0.12.4
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.6
My index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jlojafrontend</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>