角ngx数据采集器z-索引

Question

我在一个扩展中有多个表单，我使用这个代码作为日期选择器，

<mat-form-field>
  <input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>

这很好，扩展没有隐藏它的(看一看)，但是我有开始值和结束值的日期和时间，所以我切换到ngx材料数据采集器。

我唯一的问题是，扩展隐藏了daterangepicker (看一看)，所以daterangepicker代码如下所示：

      <mat-form-field>
        <input
          matInput
          ngxDaterangepickerMd
          name="daterange"
          placeholder="Choose date"
          applyLabel="Okay"
          startKey="start"
          endKey="end"
          firstMonthDayClass="first-day"
          lastMonthDayClass="last-day"
          emptyWeekRowClass="empty-week"
          lastDayOfPreviousMonthClass="last-previous-day"
          firstDayOfNextMonthClass="first-next-day"
          [autoApply]="options.autoApply"
          [linkedCalendars]="options.linkedCalendars"
          [singleDatePicker]="options.singleDatePicker"
          [showDropdowns]="true"
          formControlName="date"

          [showWeekNumbers]="options.showWeekNumbers"
          [showCancel]="options.showCancel"
          [showClearButton]="options.showClearButton"
          [showISOWeekNumbers]="options.showISOWeekNumbers"
          [customRangeDirection]="options.customRangeDirection"
          [lockStartDate]="options.lockStartDate"
          [closeOnAutoApply]="options.closeOnAutoApply"
          [opens]="opens"
          [drops]="drops"
          [timePicker]="timePicker"
        />
      </mat-form-field>

我尝试给它一个自定义的z索引，比如：

.md-drppicker {
  z-index: 9999;
}

ngx-daterangepicker-material {
  z-index: 9999;
}

但这并没有解决问题，也试图扰乱显示/位置，但我无法解决它。

你知道怎么回事吗？

编辑：下面是数据选择器问题的更好图片

Answer 1

您需要使用溢出属性，因为日历没有空格。我想它能解决你的问题。

.md-drppicker {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

ngx-daterangepicker-material {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

如果问题仍然存在，我建议您附加一个stackblitz实例。

Answer 2

我使用的版本是ngx-daterangepicker-资料2.4.1的角度6.1.10

对我们来说，问题是使用MatInput和角分裂-ng6.

我们的实现的css修复如下

.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
    position: fixed;
}

在使用了上面的日历之后，我们的日历正确地呈现在相邻的层上，并且当日历的发射区域小于并排显示日历所需的宽度时，我们并没有包装日历。