Ngx-datatable: Dropdown element is hidden by next row

[Zerych]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
If you add a dropdown element inside row and expand it, it will be covered by the next row. I'm using scrollV in my table.

Expected behavior
Dropdown hovers next row and is visible that way.

• Table version:
  9.3.0

• Angular version: 2.0.x
  4.0.0

[Zerych]

[bheda91]

Having the same issue.

@amcdnl Please suggest any solution can be done using CSS or some tricks.

[Zerych]

@bheda91 I've fixed it by reverting all rows' z-indexes, if you're interested. But that's a terrible solution.

let rows = document.getElementsByClassName('datatable-row-wrapper');
      for (let i = 0; i < rows.length; i++) {
        let row = <HTMLElement>rows[i];
        row.style.zIndex = '' + (1000 - i);
      }

[bheda91]

Thanks @Zerych, your solution will work. But terrible one. :(

Can be do some better solution like, suggested in this https://github.com/angular-ui/ui-select/issues/308

[PankajAS]

@Zerych z-index not working

[Ashwin2488]

@Zerych @bheda91 Will setting the Z-index of currently selected row to higher value work?
.datatable-row-wrapper:hover { z-index: 12; // higher than other rows }

[lmedeiros]

Try adding this css style

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

It worked for me with a bootstrap dropdown inside a cell

[vincent-cm]

To modify css z-index and overflow properties won't work, because this issue is caused by the cascaded DOM order. The correct solution is to modify the source HTML template, DOM structure.

[DmitriyIvanko]

I found this solution (may help somebody):
1) use @ng-select/ng-select
2) and add attribute: appendTo="body", example:

    <ng-select [items]="simpleItems"
               appendTo="body"
               [(ngModel)]="selectedSimpleItem">
    </ng-select>

No need any other z-index configurations.

[vincent-cm]

@DmitriyIvanko Yes you're right, the plugin helped to append the selectable outside the parent div, programmatically.

[KateFr]

https://valor-software.com/ngx-bootstrap/#/dropdowns#container

solved problem of in row dropdown for me

[idzeravianka]

if you don't need virtual scroll, disable it, and problem will be fixed

[melanialvarez]

For me it worked:

.datatable-row-wrapper {
  z-index: 1; // Set an smaller value for all rows

  &:hover {
    z-index: 2; // increase the value when hovering
  }
}

or if you are using ngx-bootstrap dropdown you can append the dropdown to body by adding container="body".

<div class="btn-group" dropdown container="body">