2

I have used Primeng p-table with filter and frozen column feature (one column is freezed rest are movable). In the header I am giving select dropdown as a filter control. When I am opening the dropdown, the values are getting hidden as shown in the pic.

Dropdown with hidden values

Since the table header is scrollable its having property overflow:hidden. So when I am removing this, the dropdown values gets visible but the table header doesn't hide as shown below.

After removing overflow hidden

mkalsi
  • 355
  • 1
  • 3
  • 14
tariqzak
  • 61
  • 1
  • 5

1 Answers1

11

I replicated your issue. And there is something called appendTo option for dropdown. Which will easily fix this issue.

Just add this option in your dropdown like below :

<p-dropdown appendTo="body" placeholder="Type or Select"></p-dropdown>

That's all.

2nd Option is :

overwrite below CSS:

.ui-table-scrollable-header.ui-widget-header {
        overflow:visible;
    }

This is just another hack to do it.

DirtyMind
  • 2,353
  • 2
  • 22
  • 43
  • I tried using appendTo option but the dropdown gets stuck on the page and since the table is scrollable the column header moves somewhere else. Using your second option the problem occurs as shown in 2nd pic of my question. Thanks btw – tariqzak Jan 25 '19 at 11:59
  • @tariqzak can you share your code. Cause I did the same thing and it is working perfectly. Also I am using angular vs 6 and primeng v6. I want to see how you tried these options which I mentioned. – DirtyMind Jan 25 '19 at 14:05
  • make sure you are not using `appendTo` inside square bracket like `[appendTo]`. – DirtyMind Jan 25 '19 at 14:13