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.

z-index is already applied but not works. you can refer here https://www.primefaces.org/primeng/#/table/filter — ankita patel, Aug 21 '18 at 04:52
but as i see in this example it is responsive....I mean they do not give the option the table to be scrollable — לבני מלכה, Aug 21 '18 at 04:58
but I have so many fields in the table so my table has scroll. — ankita patel, Aug 21 '18 at 05:00
try to increase the value of `z-index` and to se position relative/absolute — לבני מלכה, Aug 21 '18 at 05:01
it will be easy to help you if you put your code here and after save post the link:https://stackblitz.com/edit/primeng-table — לבני מלכה, Aug 21 '18 at 05:13

score 4 · Answer 1 · edited Sep 09 '19 at 05:36

4

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

edited Sep 09 '19 at 05:36

Pardeep Jain

84,110
37
165
215

answered Feb 21 '19 at 08:23

developer

521
1
5
21

score 0 · Answer 2 · edited Sep 09 '19 at 07:50

0

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!

edited Sep 09 '19 at 07:50

Kiran Mistry

2,614
3
12
28

answered Oct 18 '18 at 09:39

Ray

1
1

score 0 · Answer 3 · answered Feb 06 '20 at 08:22

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

PrimeNG filter dropdown issue in scrollable turbo table

3 Answers3

Linked