将上下文菜单从上一行移至下一行

Question

我在Angular中使用ngx-datatable@14.0.0包，因此尝试创建上下文菜单。不幸的是，我在层中显示的上下文菜单不影响下一行。此处的示例：

我的目标是在下面的行上方显示一个上下文菜单。这是stackbltz https://stackblitz.com/edit/angular-wohung?file=src%2Fstyles.css的链接。您必须右键单击一行以触发下拉菜单。

@edit

<div>
    <h3>
        Virtual Scrolling with 10k Rows
        <small>
      <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/virtual.component.ts" target="_blank">
        Source
      </a>
    </small>
  </h3>
  <ngx-datatable
    class='material'
    [rows]='rows'
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="getRowHeight"
    [scrollbarV]="true"
    (tableContextmenu)="onTableContextMenu($event)">
    (page)="onPage($event)">
    <ngx-datatable-column name="Name" width="300">
      <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
        <strong>{{value}}</strong>
        <div class="wrapper">
          <div *ngIf="row.expanded" class="context">
            <div>Hello</div>
            <div>Hello</div>
            <div>Hello</div>
            <div>Hello</div>
            <div>Hello</div>
          </div>
        </div>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>

CSS

.datatable-row-group {
  will-change: transform;
}

.wrapper {
  position: relative;
}

.context {
  position: absolute;
  z-index: 32;
  transform: translateZ(0);
  background-color: #9cd2ff;
}

datatable-body-cell {
  overflow: visible !important;
}

Answer 1

好的，我设法解决了这个问题。当我打开上下文菜单时，我禁用了该修复程序；当我隐藏它时，我阅读了该修复程序。

CSS

body:not(.dropdown-opened) .datatable-row-group {
  will-change: transform;
}

控制器

onDropdownOpen() {
  document.body.classList.add('dropdown-opened');
}

onDropdownClose() {
  document.body.classList.remove('dropdown-opened');
}