Primeng: p-dropdown options not displaying properly when used as a DataTable filter

[bomberblue07]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/Qi2Nw2imLpDUF8NJinYw?p=preview

Current behavior

I tried to recreate the settings of the table of my app as closely as possible in the plunkr. When I try to bring up my dropdown filter options, they don't display properly. But I can iterate through the options with the keyboard and the filter behaves properly.

Expected behavior

The dropdown options should clearly appear and be clickable

Minimal reproduction of the problem with instructions

Demo plunkr of issue: http://plnkr.co/edit/fILcKSFsRtdJzyxw5u5s?p=preview

• Angular version: 4.3.X
  

• PrimeNG version: 2.1.X
  

• Browser: [Chrome 60]
  

• Language: [all]

This is a similar issue to #3668 but that person failed to show the issue in a plunkr.

[alokkarma]

I don't know the solution but it is happening because of responsiveness (responsive= 'true') of the table which is using media querry like below when you resize the browser:

@media (max-width: 35em)
.ui-datatable-reflow thead th, .ui-datatable-reflow tfoot td {
    display: none !important;
}

Just do inspect element and make it block u can see the filters but that looks very awkward. What I recommend you can create your own CSS to handle this.

[bomberblue07]

@alokkarma removing responsive = true from the table does not fix the problem for me, but removing that and resizableColumns did. Unfortunately, having resizable columns is a requirement for my application so I guess I'll just have to wait until this issue is fixed and just use a vanilla text filter.

[Helayxa]

Just add the property : appendTo="body" on your p-dropdown :)

[bomberblue07]

@Helayxa That seems to work! I'm going to keep this issue open just in case the developers didn't intend for that to be the solution for something like this

[alokkarma]

Another solution is use [style]="{'overflow':'visible'}" at column. by default overflow property is hidden for table coloumn.
<p-column field="type" header="Type" [filter]="true" filterMatchMode="equals" [style]="{'overflow':'visible'}">
Sometimes if you want to change the styling of your dropdown or multielect using your own CSS this solution would be useful.

[bomberblue07]

Seems like the devs don't care and find this issue's solution acceptable. Closing.

[ravikzm]

I have followed all suggestions like using overflow : visible or appendTo="body" but nothing working for me and the dropdown in disabled mode
<p-column [style]="{'width':'5%','overflow':'visible'}" [sortable]="false" field="Status" header="Status" [filter]="true" filterMatchMode="equals" > <ng-template pTemplate="filter" let-itemcol> <p-dropdown [options]="statusList" [style]="{'width':'100%','overflow':'visible'}" appendTo="body" (onChange)="dtaction.filter($event.value,itemcol.field,itemcol.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown> </ng-template> </p-column>

Please help to resolve it

[alokkarma]

can you please create plunker for this issue?

[ravikzm]

Here is the plunker but I not able to replicate issue.
http://plnkr.co/edit/tmfPyfnzo0DMvhglPzk2?p=preview
if there is no record, able seeing the options in background

But when remove the Bootstrap css (3.3.7) reference, getting options as expected.

##Updated

Able to replicate the issue in Plunker when using the bootstrap modal

http://plnkr.co/edit/tmfPyfnzo0DMvhglPzk2?p=preview

[mbsanchez]

I'm experiencing this issue in angular 9, but in my case the dropbox is inside a div not a table. using appendTo doesn't solve the issue

[mbsanchez]

I solve my issue, just i forgot to import BrowserAnimationsModule in app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';