Primeng: Dropdown inside container with overflow: hidden
Hello. I'm impressed how much useful directives you have - thank you!
There is one issue with dropdown: when parent element (container) has "overflow: hidden" and fixed height, dropdown menu will be clipped after container's height limit.
I know one way how it can be solved (and how ng-material is doing it): attach popup menu part as a child of the <body>, with fixed position, intercept all key-down events and all scroll events, right from the <body>.
But maybe there are other ways - you have a lot of elements done and it means you have a lot of experience, so maybe you'll find even better ways to fix it.
e-oz
All 10 comments
Just a note: the same thing happens with the Calendar component.
brian428
on 30 Nov 2016
you can try <p-dropdown appendTo="body" ...
gilhanan
on 18 Dec 2016
Doesn't work, unfortunately. :-/
brian428
on 16 Feb 2017
appendTo="body" fixes this for me.
cagataycivici
on 9 Mar 2017
I think the problem I have with appendTo is actually the positioning/available space calculation issue I created in https://github.com/primefaces/primeng/issues/2128.
brian428
on 9 Mar 2017
you can try
<p-dropdown appendTo="body" ...
this worked for me!
akshaya-r
on 2 May 2019
you can try
<p-dropdown appendTo="body" ...
This resets the styling I have made for the dropdown menu.
mikeveltman
on 3 Mar 2020
appendToBody doesn't work for me.
mbsanchez
on 18 May 2020
I solved my issue, just i forgot to import the BrowserAnimationsModule
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
mbsanchez
on 18 May 2020
Worked for me
psriniv
on 16 Sep 2020
Related issues
Helayxa
路
3Comments
miresk
路
3Comments
lilling
路
3Comments
garethlewis
路
3Comments
gatapia
路
3Comments
Most helpful comment
you can try
<p-dropdown appendTo="body" ...