I have a custom dropdown component in each header cell of ngx-datatable.But when I click at that dropdown then it is going inside ngx-datatable body.How can I add custom dropdown so that its popup will come on the top.

I’m submitting a … (check one with “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

I have custom dropdown component in each header cell of ngx-datatable. But when I click at dropdown the it is going inside ngx-datatable body. I tried with three or four dropdown.

Expected behavior I have custom dropdown component in each header cell of ngx-datatable. But when I click at dropdown the it is going then it should disply that dropdown.

Reproduction of the problem

<div> <ngx-datatable style="height:calc(100vh - 255px);" class='material' [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}' [columnMode]="'force'" [headerHeight]="height" [rowHeight]="getRowHeight" [scrollbarV]="true" [scrollbarH]="true" [loadingIndicator]="loadingIndicator" [rowClass]="getRowClass" (page)="onPage($event)"> <div> <ngx-datatable-column [width]="50" [frozenLeft]="true"> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template > </ng-template> </ngx-datatable-column>

    <ul>
      <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
            
                <!--<select class="draggable" style="z-index:1000">
                <option value="volvo">{{value}}</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select> -->
                

         

                  <div style="width:150px">
                  <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>

</div>

    </ng-template>
    
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        {{row[col]}}

      </ng-template>
    </ngx-datatable-column>

      </li>
    </ul>
    
  </div>
  </ngx-datatable>
</div>

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 4.0.0 Typescript version:2.4.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[DevNogueira]

Hi @mohittripathi ! I was having the same problem! Dtry put that in your css:

.datatable-header-cell, .datatable-header { overflow:visible !important;
} .datatable-row-center{ z-index:11; }

[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.