Dialog backdrop is not displaying as expected

UI Components for Angular
Post Reply
jruhlin
Posts: 5
Joined: 21 May 2016, 22:02

21 May 2016, 22:34

Hi all,

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>
Here is my component code:

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);
   }
}

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 May 2016, 18:53

Do you see a div with ui-widget-overlay ui-dialog-mask class appended to body when you display the dialog.

Like;

Image

jruhlin
Posts: 5
Joined: 21 May 2016, 22:02

25 May 2016, 17:20

optimus.prime wrote:Do you see a div with ui-widget-overlay ui-dialog-mask class appended to body when you display the dialog.

Like;

Image

Hi,

Yes, I actually used that class to position the backdrop to absolute left:0 top:0, which fixed the backdrop. Now the only thing left, is trying to figure out why the dialog is opening at the bottom of the window, but centers responsively when I manually adjust the window size by dragging. Thanks Optimus!!

jruhlin
Posts: 5
Joined: 21 May 2016, 22:02

25 May 2016, 21:01

In the dialog.js we obtain the viewport in the Dialog.prototype.center, but on init, it is grabbing the wrong value for elementHeight and breaking the placement of the modal. But, when we adjust the window size it triggers the correct elementHeight and places the modal in center. Any ideas on how to make getViewport() work correctly on init?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests