Primeng: modal dialog freezes the whole page

[final87]

Hello,
adding a modal dialog and setting it visible, the whole page, including the dialog is frezzed.

<p-dialog id="dlgelement" header="test" [(visible)]="display" showEffect="fade" modal="modal"  >
    <p>Are you sure?</p>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
              <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
              <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>  
            </div>
        </footer>
</p-dialog>

I've found this forum on primefaces, but I cannot append the dialog directly to the body.
any idea?

thank you

[cagataycivici]

Do you have custom z-indexes in your dialog, what are the ancestors of p-dialog? Do they have z-index?

[final87]

actually not, I don't have any z-index

[cagataycivici]

Is it possible to send us the whole page code?

[final87]

yes, but the whole application in quite big and the routing is complex.
the page with the dialog is a form. this is the page (newPersonnel.html):

<p-dialog id="dlgelement" header="Test" [(visible)]="display" showEffect="fade" modal="modal">
    <p>Are you sure?</p>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
              <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
              <button type="button" pButton icon="fa-check" (click)="deleteFromDb()" label="Yes"></button>  
            </div>
        </footer>
</p-dialog>


<div>
    <form (ngSubmit)="onSubmit()" #persForm="ngForm">
  <fieldset class="form-group">
    <label for="formGroupFirstName">Name</label>
    <input type="text" class="form-control" id="formGroupFirstName" required [(ngModel)]="person.firstName" placeholder="Nome" ngControl="name" #name="ngForm">
   </fieldset>
  <fieldset class="form-group">
    <label for="formGroupSecondName">Surname</label>
    <input type="text" class="form-control" id="formGroupSecondName" required [(ngModel)]="person.lastName" placeholder="Cognome" ngControl="surname" #surname="ngForm">
  </fieldset>
  <fieldset class="form-group">
    <label for="formGroupSex">Gender</label>
      <select class="form-control" required [(ngModel)]="p_sex">
       <option *ngFor="#p of sex" [value]="p">{{p}}</option>
      </select>
  </fieldset>
   <p>
      <button type="submit" class="btn btn-success" [disabled]="!persForm.form.valid">Save</button>
      <button (click)="cancel()" type="button" class="btn btn-warning">Cancel</button>
    </p>
     <p>
      <button (click)="deleteDialog()" type="button" class="btn btn-danger" *ngIf="person.id !== null">Delete Person from database</button>
    </p>
   </form> 
</div>

and this is the ts:

import {Component, OnInit} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
import {Personnel} from '../personnel';
import {PersonnelService} from '../personnelService';
import {HTTP_PROVIDERS} from 'angular2/http';
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {Dialog} from 'primeng/primeng';
import {Button} from 'primeng/primeng';

@Component({
    selector: 'sm-newPersPage',
    templateUrl: './pages/smStaff/newPersonnelComponent/newPersonnel.html',
    styleUrls: ['./pages/smStaff/newPersonnelComponent/newPersonnel.css'],
    directives: [BUTTON_DIRECTIVES, Dialog, Button],
    providers: [PersonnelService, HTTP_PROVIDERS]
})
export class NewPersCmp implements OnInit {

    person = new Personnel(null,null,null,null,null,null,null,null,null);
  sex = ['Maschio', 'Femmina'];
  p_sex = this.sex[0];
  errorMessage: string;
  submitted = false;
  id: string;
  display: boolean = false;

constructor(
  private _router: Router,
  private _routeParams:RouteParams,
  private _service: PersonnelService
  ) {}

  ngOnInit() {
  this.id = this._routeParams.get('id');
  if( this.id !== null) {
        this._service.getPersonfromID(this.id).subscribe(person => {
          this.person = person;
          if (this.person.sex === 'female') {
               this.p_sex =  this.sex[1];
             } else {
               this.p_sex =  this.sex[0];
            }
        },
            error =>  this.errorMessage = <any>error);
     }
    }

cancel() {
    this.gotoTable();
  }

  deleteDialog() {
     this.display = true;

  }

  deleteFromDb() {
   this.display = false;

    if(this.person.id !== null) {
  this._service.deletePersonSmall(this.person).subscribe(response=> {
         this.gotoTable();
    },
        err => console.error(err),
        () => console.log('done')
        );
} else {
    console.log('ERROR: trying to delete person without ID');
}
  }

onSubmit() {
  if(this.p_sex === this.sex[0]) {
      this.person.sex = 'male';
 } else {
      this.person.sex = 'female';
  }

    this.person.fullName = this.person.firstName+' '+this.person.lastName;

if(this.person.id !== null) {

  this._service.editPersonSmall(this.person).subscribe(response=> {
         this.gotoTable();
    },
        err => console.error(err),
        () => console.log('done')
        );
} else {
  this._service.storePersonSmall(this.person).subscribe( response=> {
         this.gotoTable();
    },
        err => console.error(err),
        () => console.log('done')
    );
}
  }

gotoTable() {
    this._router.navigate(['StaffTable']);
  }
}

newPersonnel.ts component is inserted in the in this page (staffPage.html):

<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-xl-12">
            <h1 class="page-header">
                Personale
            </h1>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i>  <a href="Javascript:void(0);" (click)="gotoDashboard()">Dashboard</a>
                </li>
                <li class="active">
                    <i class="fa fa-table"></i> Personale
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->
 <div class="tablewrap">
 <router-outlet> </router-outlet>
 </div>
 </div>

its ts is:

import {Component} from 'angular2/core';
import {RouteConfig,Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {StaffTableCmp} from '../../../pages/smStaff/components/staffTables';
import {NewPersCmp} from '../../../pages/smStaff/newPersonnelComponent/newPersonnel';

@Component({
    selector: 'sm-staffPage',
    templateUrl: './pages/smStaff/components/staffPage.html',
    styleUrls: ['./pages/smStaff/components/staffPage.css'],
    directives: [BUTTON_DIRECTIVES, ROUTER_DIRECTIVES]
})
@RouteConfig([
     { path: '/', component: StaffTableCmp, as: 'StaffTable' },
     { path: '/newPers-page/:id', component: NewPersCmp, as: 'NewPersPage' },
     ])
export class StaffPageCmp {
    constructor(private _router: Router ) { }
    gotoDashboard() {
        this._router.navigate(['SMHome']);
    }
}

[final87]

I've used this component in two part of the program, one works, the second doesn't (which is the same listed above). probably it doesn't work beacuse the componet with the dialog is called with

<section class="main-container" >   
    <router-outlet></router-outlet>
</section> 

Is there an "appendTo" function, to append this component directly to the body ?

[Mario-Eis]

Any solutions on this? Same probelm using a router outlet

[cagataycivici]

Please see;

https://github.com/primefaces/primeng/issues/656

[cagataycivici]

<p-dialog appendTo="body"

should fix this.

[Mario-Eis]

That did the trick! Amazing!

[Mario-Eis]

Looks like the initial positioning is not in the center of the body though. Its positioned to the center only after resizing.

[Mario-Eis]

More on that: The initial position SEEMS to be the center of the elements parent, not the element it was attached to. responsive must be true to get the correct position when resizing.

[Mario-Eis]

I'm sorry, the problem seems to be the fact, that there is an ngIf on the dialogs content div as proposed in the data-table CRUD demo. So it has nothing to do with appendTo. That works great!

[LawzPopiel]

Thank you cagataycivici ! This worked for me.

[1bberto]

Tks Mate for the solution..
appendTo="body" solved my problem!!!!!

[MarJaysonSanAgustin]

Thank you cagataycivici ! This also worked for me.! More power to prime!

[HirSK]

In my case somehow