Primeng: Data Table - Filter and Scroll with DropDown (DropDown options cut off)

Created on 6 Nov 2017 · 4Comments · Source: primefaces/primeng

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

[ X ] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
http://plnkr.co/edit/RnyvH7U33NmCdgH9MrTt?p=preview

Current behavior
Datatable with filter and scroll causes multi drop down not to show.

Expected behavior
multi drop down option show

Minimal reproduction of the problem with instructions
See plunker above

Angular version: 2.0.X
Angular - 4.1.3
PrimeNG version: 2.0.X
PrimeNG - 4.3.0

If "ui-datatable-scrollable-body" is moved into "ui-datatable-scrollable-header" the issue is fixed.

Source

JacobSiegle

Most helpful comment

Try appendTo="body" on Dropdown.

cagataycivici on 17 Nov 2017

👍14

All 4 comments

That is due to ui-datatable-scrollable-header having overflow: hidden. Purpose for this is out of my domain right now but if it's something that does not concern you. You can remove that overflow: hidden.

nartc on 6 Nov 2017

👍1

Thanks! Didn't have enough time to look into it yet also but can confirm changing the overflow does fix the issue, I overrode it in my component for now.

JacobSiegle on 6 Nov 2017

Try appendTo="body" on Dropdown.

cagataycivici on 17 Nov 2017

👍14

@cagataycivici this issue not solve if we set table zoom: 0.8

position of the dropdown not correct, due to "zoom" didn't apply to "