title: PrimeNg ConfirmDialog design messed up, CSS not applying
body: <p><strong>Template :</strong> </p>
  
  <pre><code>&lt;p-confirmDialog  header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"&gt;&lt;/p-confirmDialog&gt;
  
  &lt;button type="button" class="btn btn-primary" (click)="confirm()" &gt;Save&lt;/button&gt;
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>  confirm() {
      console.log('confirm?');
      this.confirmationService.confirm({
          message: 'Are you sure that you want to update?',
          accept: () =&gt; {
               console.log('update clicked');
          } 
      });    
  }
  </code></pre>
  
  <p>Output display:</p>
  
  <p><a href="https://i.stack.imgur.com/9lVyp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9lVyp.png" alt="enter image description here"></a></p>
  
  <p>Is there any css file etc that I need to include? </p>
  
  <p><strong>Template(full):</strong> </p>
  
  <pre><code>&lt;!---------------- Meta and Title ----------------&gt;
  
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Solid Waste Management System&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  
  
  
  &lt;div class="tables-basic" data-spy="scroll" data-target="#nav-spy" data-offset="300"&gt;
  
  
    &lt;!-- -------------- Body Wrap  -------------- --&gt;
    &lt;div id="main"&gt;
      &lt;p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"&gt;&lt;/p-confirmDialog&gt;
      &lt;!-- -------------- Topbar -------------- --&gt;
      &lt;header id="topbar" class="alt"&gt;
        &lt;div class="topbar-left"&gt;
          &lt;ol class="breadcrumb"&gt;
            &lt;li class="breadcrumb-icon"&gt;
              &lt;a href="#"&gt;
                &lt;span class="fa fa-eye"&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="breadcrumb-active"&gt;
              &lt;a href="#"&gt;Organizational User&lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ol&gt;
        &lt;/div&gt;
        &lt;div class="topbar-right"&gt;
          &lt;a class="btn btn-primary btn-sm" href="Edit.html"&gt;
            &lt;i class="fa fa-edit"&gt;&lt;/i&gt; Edit
          &lt;/a&gt;
          &lt;a class="btn btn-dark btn-sm" href="UserList.html"&gt;
            &lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt; Back
          &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/header&gt;
      &lt;!-- -------------- /Topbar -------------- --&gt;
  
      &lt;!-- -------------- Content -------------- --&gt;
      &lt;section id="content" class="table-layout animated fadeIn"&gt;
  
        &lt;!-- -------------- Column Center -------------- --&gt;
        &lt;div class="chute chute-center"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6 col-md-offset-3"&gt;
              &lt;div class="panel panel-visible p10"&gt;
  
                &lt;div class="panel-body pn mn allcp-form theme-primary"&gt;
                  &lt;form id="form-order" (ngSubmit)="onSubmit(f)" #f="ngForm"&gt;
                    &lt;h6&gt;OrgUser&lt;/h6&gt;
  
                    &lt;div class="section row "&gt;
  
  
                    &lt;/div&gt;
                    &lt;!-- -------------- /section -------------- --&gt;
  
  
  
                    &lt;div class="section row"&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="userid"&gt;User ID: &lt;/label&gt;
  
                        &lt;p-autoComplete (ngModelChange)="orguser.userid = $event" class="ui-autocomplete autocomplete" [suggestions]="results" (completeMethod)="search($event)"
                          (onSelect)="onSelect($event)" (onBlur)="onBlur($event.target.value)" field="userid"&gt;&lt;/p-autoComplete&gt;
                        &lt;input type="hidden" name="userid" [ngModel]="orguser?.userid"&gt;
  
  
                      &lt;/div&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="perid"&gt;Personnel ID:&lt;/label&gt;
                        &lt;input type="text" class="form-control" [ngModel]="orguser?.perid" (ngModelChange)="orguser.perid = $event" name="perid"
                          id="perid"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
  
                    &lt;div class="section row"&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="Password"&gt;Password:&lt;/label&gt;
                        &lt;input type="text" class="form-control" [ngModel]="orguser?.password" (ngModelChange)="orguser.password = $event" name="password"
                          id="password"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="fullname"&gt;Name:&lt;/label&gt;
                        &lt;input type="text" class="form-control" name="fullname" disabled [ngModel]="orguser?.perfullname" (ngModelChange)="orguser.perfullname = $event"
                          id="fullname"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
  
  
                    &lt;div class="section row"&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="type"&gt;CreatedOn:&lt;/label&gt;
                        &lt;input type="text" class="form-control" name="createdon" disabled [ngModel]="orguser?.createdon" (ngModelChange)="orguser.createdon = $event"
                          id="createdon"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-6 ph10 mb5 "&gt;
                        &lt;label for="CreatedBy "&gt;CreatedBy:&lt;/label&gt;
                        &lt;input type="text" class="form-control" name="createdby" disabled [ngModel]="orguser?.createdby" (ngModelChange)="orguser.createdby = $event"
                          [(ngModel)]="orguser.createdby" id="createdby"&gt;
  
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="section row"&gt;
                      &lt;div class="col-md-6 ph10 mb5"&gt;
                        &lt;label for="Deletedby"&gt;Deleted By:&lt;/label&gt;
                        &lt;input type="text" class="form-control" disabled name="Deletedby" id="Deletedby"&gt;
  
                        &lt;div class="col-md-6 ph10 mb5"&gt;
                          &lt;label for="isactive"&gt;IsActive:&lt;/label&gt;
                          &lt;input type="checkbox" id="isactive" [ngModel]="orguser?.isactive" (ngModelChange)="orguser.isactive = $event" name="isactive"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class="section row"&gt;
  
                        &lt;div class="col-md-6 ph10 mb5"&gt;
                          &lt;label for="isdeleted"&gt;Is Deleted:&lt;/label&gt;
                          &lt;input type="checkbox" id="isdeleted" [ngModel]="orguser?.isdeleted" (ngModelChange)="orguser.isdeleted = $event" name="isdeleted"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!-- -------------- /section -------------- --&gt;
  
                    &lt;hr&gt;
  
                    &lt;!-- -------------- /section -------------- --&gt;
  
                    &lt;div class="section text-right mb10 "&gt;
  
                      &lt;button type="button" class="btn btn-primary" (click)="confirm()"&gt;Save&lt;/button&gt;
  
                    &lt;/div&gt;
                    &lt;!-- -------------- /Panel Body -------------- --&gt;
  
                  &lt;/form&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- -------------- /Column Center -------------- --&gt;
      &lt;/section&gt;
      &lt;!-- -------------- /Content -------------- --&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Componenet(full):</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { orguser } from '../../Models/orguser';
  import { PersonnelService } from '../../services/personnel.service';
  import { OrguserService } from '../../services/orguser.service';
  import {ConfirmDialogModule} from 'primeng/confirmdialog';
  import {ConfirmationService} from 'primeng/api';
  
  @Component({
    selector: 'app-orguseraddedit',
    templateUrl: './orguseraddedit.component.html',
    styleUrls: ['./orguseraddedit.component.css'],
  
  })
  export class OrguseraddeditComponent implements OnInit {
    orguser: orguser = new orguser();
  
    val: any;
    results: any[];
  
    constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {
  
    }
  
    confirm() {
      console.log('confirm?');
      this.confirmationService.confirm({
          message: 'Are you sure that you want to update?',
          accept: () =&gt; {
               console.log('update clicked');
          } 
      });
  
  
  }
  
  confirm1() {
    this.confirmationService.confirm({
        message: 'Are you sure that you want to Add?',
        accept: () =&gt; {
             console.log('add clicked');
        },
       key:"add"
    });
  }
  
  
    search(event) {
      this._OrguserService.GetOrgUsersForAutocomplete(event.query)
        .subscribe((userdata: any[]) =&gt; { this.results = userdata;console.log('xxxx'); console.log(this.results); }, (error) =&gt; {
          //this.statusMessage = 'Problem with service. Please try again.'
          console.error(error);
        });
  
    }
    handleDropdown(event) {
      console.log(event.query);
      //event.query = current value in input field
    }
  
    ngOnInit() {
      //this.orguser=null;
  
    }
  
    onBlur(value){
      this._OrguserService.selectOrgUsersById(value)
        .subscribe((userdata: any[]) =&gt; { this.orguser = userdata[0]; }, (error) =&gt; {
          console.error(error);
        });
    }
    onSelect(value) {
      this.getuser(value.userid);
    }
  
    getuser(value){
      this._OrguserService.selectOrgUsersById(value)
      .subscribe((userdata: any[]) =&gt; { this.orguser = userdata[0]; console.log(this.orguser); }, (error) =&gt; {
        console.error(error);
      });
    }
    onSubmit(f) {
  
  
      this._OrguserService.addupdateOrguser(f.value)
      .subscribe((res: any) =&gt; {
        console.log(res);
      this.orguser = res;
        { console.log('success'); this.getuser(f.value.userid); };
      }, (error) =&gt; {
        console.error(error);
      });
  
  
    }
  
  }
  interface IAutoCompleteItem {
    value: any;
    text: string;
    markup?: string;
    isFocus?: boolean;
  }
  </code></pre>
  
  <p>After removing all the stylesheet references and everything else on the template this is what I am getting: </p>
  
  <p><a href="https://i.stack.imgur.com/AhHxs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AhHxs.png" alt="enter image description here"></a></p>