The HTML for these two dialogs looks like this:
Code: Select all
<p-dialog header="Save Location" [modal]="true" [(visible)]="showSaveDialog" width="350" height="190">
<div style="height: 60px;">
Save location as:
<ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" [style]="{width: '200px'}"></ks-dropdown>
<br><br><p-checkbox [(ngModel)]="makeDefault" binary="true" label="Make this the default location"></p-checkbox>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="far fa-window-close" (click)="showSaveDialog=false" label="Cancel"></button>
<button type="button" pButton icon="fas fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
</div>
</p-footer>
<p-confirmDialog header="Same location name in use" icon="fas fa-question-circle" width="400"></p-confirmDialog>
</p-dialog>
Code: Select all
if (_.find(this.app.locations, {name: this.selectedName })) {
this.confirmationService.confirm({
message: `Are you sure you want to replace the existing "${this.selectedName}"?`,
accept: () => this.completeSave()
});
}
For lack of a better answer so far, this is what I'm going with for now:
Code: Select all
setTimeout(() => {
const masks = document.getElementsByClassName('ui-dialog-mask');
if (masks && masks.length > 0)
(masks[masks.length - 1] as HTMLElement).style.zIndex = 'auto';
});