PrimeNG filter dropdown issue in scrollable turbo table

Question

In prime-ng turbo table , when we put filter dropdown in scrollable table dropdown going inside the table

Without scrollbale table dropdown works perfect. This works perfect

but when scrollable table , dropdown is going inside the table Not works perfect. so I want to do dropdown outside the table not inside the table.

This is a link https://primeng-table-bry1sl.stackblitz.io/ to see the code. Please see in 1024 resolution so you can see the scroll in the table and select one of the brand to filter the data.

Can anyone help me.

Porphyrin

try to set z-index to dropdown – Unsuitable

z-index is already applied but not works. you can refer here primefaces.org/primeng/#/table/filter – Porphyrin

but as i see in this example it is responsive....I mean they do not give the option the table to be scrollable – Unsuitable

but I have so many fields in the table so my table has scroll. – Porphyrin

try to increase the value of z-index and to se position relative/absolute – Unsuitable

I have done all the stuff but not working. – Porphyrin

it will be easy to help you if you put your code here and after save post the link:stackblitz.com/edit/primeng-table – Unsuitable

Answer 1

Try to use appendTo="body" attribute available on dropdown of Primeng, which might be helpful in your case.

Complete example here -

<p-dropdown appendTo='body' [options]="value" [style]="{'width':'100%'}" placeholder="Select"></p-dropdown>

Reference from here

Manus

Answer 2

The problem is here:

.ui-table-resizable .ui-table-thead>tr>th, .ui-table-resizable .ui-table-tfoot>tr>td, .ui-table-resizable .ui-table-data>tr>td {
    /* overflow: hidden; */
}

Try to comment the overflow attribute or set to visible ... it works!

Pelt

Answer 3

Solved by overwriting the below overflow to be visible:

//Old code in primeng.min.css
    .ui-table-scrollable-header, .ui-table-scrollable-footer {
        **overflow: hidden;**
        border: 0 none;
    }
//add this to your stylesheet instead
    .ui-table-scrollable-header, .ui-table-scrollable-footer {
        **overflow: visible;!important**
        border: 0 none;
    }

Also, add this in your stylesheet after the code above:

.ui-table-scrollable-view {
  overflow: hidden!important;
}

see here result image

Nitrate