Make context menu from one row be above the next rows

Question

I am using ngx-datatable@14.0.0 package for Angular and I try to make a context menu. Unfortunately, a context menu i displayed as it was in the layer blow the next row. Example here:

My goal is to have a context menu displayed above the rows below. Here is a link to stackbltz https://stackblitz.com/edit/angular-wohung?file=src%2Fstyles.css. You have to right click a row to trigger dropdown.

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

Giving only a link to your code (such as stackblitz) is not healthy. What if the link will become broken in the future? Then the question will be ambiguous for future readers. Please share the relevant part of your code in the question. — Harun Yilmaz, Jan 08 '19 at 08:23
@CuongHoang Added some code. There is not much, because its hidden behind a component implemetation in the lib. That is why I gave a working demo to play with dev tools. — Humberd, Jan 08 '19 at 08:30
@Justcode As you see on the screen there is a blue dropdown which currently is blended with the next row. What I want for it is to be directly above the next row, so the names Mabel and Frank would be hidden behind. — Humberd, Jan 08 '19 at 08:32

score 0 · Answer 1 · answered Jan 08 '19 at 13:20

Ok, I managed to fix that. When I open context menu I disable the fix and when I hide it I readd the fix.

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

Make context menu from one row be above the next rows

1 Answers1