Primeng: p-dropdown doesn't work in header of datatable when table is scrollable

[cqzheng]

Make the column [filter]="true", add template with p-dropdown for filter and add style style="overflow:visible". It works correctly. But if add scrollable="true" to the datatable, the list of p-dropdown doesn't show correclty. The overflow part is hidden.
Did some debugging and found that a div with class ui-datatable-scrollable-header to wrapper table header is added when specify scrollable="true". Class ui-datatable-scrollable-header just set style "overflow:hidden". Thus p-dropdown doesn't work. The style="overflow:visible" can not passed to the div. There must be conflict of scrollable and custom filter.

[StevenLiekens]

Same problem with p-calendar.

[rohitsindhu90]

hi ,

Same problem i was facing in past. appendTo='bpdy' worked for me.
example:
field="CTNStatus" header="Status" [filter]="true" filterMatchMode="equals">

        <!--<template let-col let-model="rowData" pTemplate="body">
            <span> {{model[col.field]}}</span>
            <span>{{model["ChangedCTNStatusDate"]}}</span>
        </template>-->
    </p-column>

On Tue, Mar 28, 2017 at 12:24 PM, Steven Liekens [e-mail]
wrote:

Same problem with p-calendar.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/2368#issuecomment-289680269,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQcllsY31EtoNQJuOwapSb3voDo_u8Oxks5rqK6JgaJpZM4MmnzJ
.

[mukeshkamboj]

@rohitsindhu90 thanks for the solution. This saved my time 👍

[bimalpaul]

@rohitsindhu90 Thanks for that quick solution. 👍 🥇

[unaor]

Thanks saved the day

[RebelSyntax]

appendTo="body"

@rohitsindhu90 nailed it

[cagataycivici]

Use appendTo body please.

[MayerMar]

Sorry for posting to a closed issue, but it would be great if infos like these would be linked on your showcase/example page.

Would have saved me much time tinkering around aswell as it will for future visitors.

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

The issue happening when using the bootstrap modal and here is plunker
http://plnkr.co/edit/tmfPyfnzo0DMvhglPzk2?p=preview
Please help to resolve it

[lalitmee]

Hello Guys, I solved the dropdown not showing bug by using the appendTo="body". But now what's happening is kind of ridiculous. As I am clicking on some dropdown to open and then scrolling the data of the table the drop-down is going with the table data. :thinking: :worried:
I am attaching the screenshot of that. Please have a look and someone please tell me the reason why its happening. Thank you so much, guys. :innocent:

[UttamGiri]

lalitmee did you find solution

[emrebaris9]

@lalitmee did you find the solution?

[lingardo]

@emrebaris9 did you find the solution?

[lalitmee]

@emrebaris9, it was a long time ago. I don't remember. But as I can see the screenshot I have attached, I don't think I found the solution.

[lingardo]

Guys, i found the solution, just need to delete propperty overflow: hidden in ui-table-wrapper

[mbsanchez]

In my case this issue was due that i forget to import the BrowserAnimationsModule in app.module.ts

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