使一行的上下文菜单位于下一行的上方答案

【问题标题】：Make context menu from one row be above the next rows使一行的上下文菜单位于下一行的上方
【发布时间】：2019-06-02 21:37:44
【问题描述】：

我正在为 Angular 使用 ngx-datatable@14.0.0 包，并尝试制作一个上下文菜单。不幸的是，我在图层中显示的上下文菜单吹到了下一行。此处示例：

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

@编辑

<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;
}

【问题讨论】：

你能给我们一些代码吗
请详细说明您想要的输出方式
只提供代码的链接（例如 stackblitz）是不健康的。如果链接将来会断开怎么办？那么这个问题对于未来的读者来说将是模棱两可的。请在问题中分享您代码的相关部分。
@CuongHoang 添加了一些代码。没有太多，因为它隐藏在库中的组件实现后面。这就是为什么我提供了一个工作演示来使用开发工具。
@Justcode 正如您在屏幕上看到的，有一个蓝色下拉列表，当前与下一行混合。我想要的是它直接位于下一行的上方，因此 Mabel 和 Frank 的名字将隐藏在后面。

标签： css angular ngx-datatable

【解决方案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');
}

【讨论】：