在 Kendo for Angular 中将上下文菜单添加到对话框

Question

在这个StackBliz 中，我有一个包含上下文菜单的 Kendo for Angular 对话框。

如果您右键单击，您应该会看到上下文菜单，但它显示在对话框后面。如何更改上下文菜单z-index 以将其显示在顶部？我尝试添加样式，但没有奏效。

 @Component({
    selector: 'my-app',
    template: `

      <kendo-dialog title="Menu inside" *ngIf="opened" (close)="close()">

       <div #target1>Right click to see the context menu</div>
       <kendo-contextmenu style="z-index:20000" [target]="target1">
               <kendo-menu-item text="Option 111"></kendo-menu-item>
               <kendo-menu-item text="Option 222"></kendo-menu-item>
               <kendo-menu-item text="Option 333"></kendo-menu-item>           
               <kendo-menu-item text="Option 444"></kendo-menu-item>           
               <kendo-menu-item text="Option 555"></kendo-menu-item>           
               <kendo-menu-item text="Option 666"></kendo-menu-item> 
               <kendo-menu-item text="Option 777"></kendo-menu-item>           
      </kendo-contextmenu>

          <kendo-dialog-actions>
              <button kendoButton (click)="close()" [primary]="true">Close</button>
          </kendo-dialog-actions>
      </kendo-dialog>
    `,
    styles: [` 
                .k-dialog { z-index:2 !important } 
                .k-overlay { z-index:1 !important }
            `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

    public opened: bool = true;

    public close() {
      this.opened = false;
    }
}

Answer 1

解决办法是用k-dialog-wrapper改变对话框z-index

.k-dialog-wrapper { z-index:2 !important }