I have a situation where the dialog modal backdrop is displaying under the content of the calling template. This may be a CSS issue, but I haven't been able to run down any CSS that is causing this. Does anyone else have this problem or any ideas on what may be happening here?
Here is my template code:
Code: Select all
<div>
<a (click)="showDialog()" label="Show Dialog">Show Dialog</a>
<p-dialog [(visible)]="display" modal="true" header="Create A Decision" responsive="true">Some Form</p-dialog></div>
Code: Select all
//angular imports
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
//vendor imports
import { Dialog } from 'primeng/primeng';
@Component({
moduleId: module.id,
selector: 'app-landing',
templateUrl: 'landing.component.html',
directives: [ROUTER_DIRECTIVES, Dialog]
})
export class LandingComponent implements OnInit {
ngOnInit() {}
display: boolean = false;
showDialog() {
console.log('using directive');
this.display = true;
console.log(this.display);
}
}