Dropdown values hidden inside scrollable table header - Primeng

2
votes

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

1
javascriptcssangularprimengprimeng-turbotable
Have you tried to inspect the elements CSS and set overflow-x: auto? – Victor Henrique
Yes, I had tried applying overflow-x: auto also on the table header where overflow:hidden is being applied. – tariqzak

1 Answers

8
votes

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.