Добавление контекстного меню в диалог в кендо для угловых - PullRequest
Новая
       7

Добавление контекстного меню в диалог в кендо для угловых

0 голосов
/ 28 сентября 2018

В этом 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;
    }
}

1 Ответ

0 голосов
/ 29 сентября 2018

Решение состоит в том, чтобы изменить z-index диалога с помощью k-dialog-wrapper 

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