css - 使一行中的上下文菜单位于下一行之上

Question

我正在为 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;
}

Answer 1

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

CSS

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

Controller

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

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