PrimeNG dropdown hidden by dialog

Question

I have an Angular2 app using PrimeNG components.

I want a dropdown inside a dialog box. However, when i have implemented this, the dropdown is cut off by the limit of the dialog box as shown in the screenshot below. What i want is for it to display above the dialog and have all the options visible.

It is only a small dialog and i do not want to create a large one for this as there will be lots of empty unused space.

My html code for this is as below:

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200">
    <div class="row col-md-12" align="center">
        <button pButton (click)="viewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
    <button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button>
</p-dialog>

If anyone can offer any advice on this it would be greatly appreciated.

Try appendTo="body" on dialog or remove overflow from ui-dialog-content div. — Cagatay Civici, Nov 09 '16 at 18:17
Did you ever solve this - I am having this same problem too? The appendTo nor the overflow css addition seemed to help — The Unculled Badger, Nov 17 '16 at 15:23

score 63 · Accepted Answer · answered Mar 21 '17 at 14:58

63

It is necessary to add an attribute appendTo.

e.g.

<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>

answered Mar 21 '17 at 14:58

esdef

654
6
3

6

Problem with your solution, if the body is bigger than your screen and you can scroll, the dropdown panel move with it but not your dialog... – SteamFire May 03 '18 at 07:58
Thank you! Saved my day too haha – David Apr 29 '20 at 15:13
Does not work for me either... – Dawid Jan 28 '21 at 17:04

score 12 · Answer 2 · answered Mar 26 '19 at 15:03

12

This is from Official NG Prime Documentation. When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body or allow overflow in dialog.

<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>

OR

 <p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>

answered Mar 26 '19 at 15:03

Igor Radovanovic

159
1
6

i did it this way appendTo=".p-dialog-content" – Abdullah Tahan Apr 24 '21 at 06:17

score 8 · Answer 3 · answered Sep 12 '18 at 19:52

There are two primary ways to solve this problem:

Add an appendTo section to each component that needs to be able to overflow the dialog.
```
<p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
```
Problems with this approach: (a) You need to add an appendTo section to each item in your dialog that may overflow, and (b) if the page behind the dialog is big enough that you can scroll, the overflowing dropdown will scroll with the page, not the dialog.
Preferred Approach: Allow the p-dialog to overflow.
```
<p-dialog [contentStyle]="{'overflow':'visible'}">
   <p-dropdown></p-dropdown>
</p-dialog>
```
If you are using a p-footer, you may also need to include the following in your css file to make sure the footer displays correctly (this is essentially adding the class ui-g-12 to the div that contains the footer):
```
p-dialog /deep/ .ui-dialog-footer {
   width: 100%;
   float: left;
   box-sizing: border-box;
   padding: .5em;
}
```

Note: Both of these solutions are listed under the PrimeNG Doc for p-dialog, although the docs do not explain how to get a footer to display correctly.

The problem with `[contentStyle]="{'overflow':'visible'}"` is that if the dialog is resized smaller than the height of the drop down, the drop down will still show on the screen as opposed to hiding as the dialog shrinks — Elliott, Jan 11 '19 at 23:15
If I wrap a dropdown with p-dialog, the dropdown disappears. — Dawid, Jan 28 '21 at 17:07

score 2 · Answer 4 · answered Nov 17 '16 at 15:31

Here is the code that worked for me:

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" resizable="true">
    <div class="row col-md-12" align="center" style="overflow-y:visible">
        <button pButton (click)="ViewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width:'200px', position:'fixed'}"></p-dropdown>
    <button pButton label="Save" (click)="ChangeTable()" style="float:right;margin-right:3px;"></button>
</p-dialog>

Hi there.. That has definitely improved matters, it no longer looks like its cut off now, however, did you put anything else in the style to increase the height of the p-dropdown container? — The Unculled Badger, Nov 18 '16 at 14:39

Pierre · Answer 5 · 2017-04-27T13:31:52.503

0

add [autowidth]="false" to p-dropdown

eg

<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
            [autoWidth]="false"></p-dropdown>

Edit : additionnaly you can tweak the width of the dropdown using the following style in your component

styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']

edited Apr 27 '17 at 13:31

answered Apr 26 '17 at 10:43

Pierre

714
7
10

PrimeNG dropdown hidden by dialog

5 Answers5