Сделать контекстное меню из одной строки выше следующих - PullRequest
Новая
       12

Сделать контекстное меню из одной строки выше следующих

0 голосов
/ 08 января 2019

Я использую пакет ngx-datatable@14.0.0 для Angular и пытаюсь создать контекстное меню. К сожалению, контекстное меню, которое я отображал, как это было в слое, уносит следующую строку. Пример здесь:

enter image description here

Моя цель - создать контекстное меню над строками ниже. Вот ссылка на 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;
}

1 Ответ

0 голосов
/ 08 января 2019

Хорошо, мне удалось это исправить. Когда я открываю контекстное меню, я отключаю исправление, а когда скрываю его, я читаю исправление.

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');
}
...