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 }

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

1 个答案: