ng-pick-datetimer日历显示在对话框后面

Question

我使用过ng prime对话框并尝试在其上添加ng-pick日期选择器但是当点击日期选择器时它隐藏在对话框后面.plz帮帮我 我的代码是

<p-dialog   [contentStyle]="{'max-height':'190px' ,'max-width':'500px','width':'100%','height':'auto'}" header="Filter Columns" styleClass="quick-view-grid-row filterbox "   [(visible)]="displayFilter"
  appendTo="body" showEffect="fade" [modal]="true">
<div *ngIf="filterRow.datatype==='DateRange'">
        <!--<p-calendar [defaultDate]="currentdate"   timezone="utc"  styleClass="calender rightPadding" autofocus required="true" name="date" appendTo="body" [style]="{ 'width':'auto','z-index': '1089'}" [(ngModel)]="filterRow.values" [maxDate]="currentdate" [monthNavigator]="true" selectionMode="range" [placeholder]=filterRow.values [yearNavigator]="true" yearRange="2000:2030" showButtonBar="true" [showIcon]="true"></p-calendar>
      <span>{{currentdate}}</span> -->
      <input [(ngModel)]="filterRow.values" [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5">
          <owl-date-time  #dt5></owl-date-time>

     </div>
</p-dialog>

Answer 1

<强>解决

我在main style.scss

上添加了这个css

.cdk-overlay-container {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 9999999 !important;
}
.cdk-global-overlay-wrapper, .cdk-overlay-container {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 9999999 !important;
}

Answer 2

这绰绰有余：

.cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 99999 !important;
}

干杯。