在全屏模式下打开时，剑道组合框变得不可选

Question

我在使用剑道组合框。每当我让一个特定的div全屏显示时，它的组合框的下拉列表就会出现，但它是不可选的。剑道组合框的代码：

<kendo-combobox
   id="chartcomboBoxId"
   [data]="data"
   [(value)]="selectedValue"
   [textField]="'desc'"
   [valueField]="'name'"
   [valuePrimitive]="true"
   (valueChange)="handleValueChange($event)"
   style="font-size: 10px; padding-top:2px; padding-left: 2px; 
         z-index:2147483648 !important;"
   *ngIf="data">
</kendo-combobox>

我已经将z-index设为max，这样列表就会出现，否则在全屏模式下列表就不会出现在窗口上方。

使div全屏的代码：

public fullScreen() {
    const container = document.getElementById('container');
    if (container .requestFullscreen) {
        container .requestFullscreen();
    } else if (container .webkitRequestFullscreen) {
        container .webkitRequestFullscreen();
    }
  }

Answer 1

您可以使用设置为'component'的popupSettings对象的appendTo属性。这样，您就可以指定popup应该附加到组件，而不是应用程序的根目录(这是默认设置)。此外，您可能想要检查此kendo documentation

 <kendo-combobox
     id="chartcomboBoxId"
     [data]="data"
     [(value)]="selectedValue"
     [textField]="'desc'"
     [valueField]="'name'"
     [valuePrimitive]="true"
     (valueChange)="handleValueChange($event)"
     [popupSettings]="{appendTo: 'component'}" <!--  <===  This line is a solution-->
     *ngIf="data">
</kendo-combobox>