Primeng: Dropdown inside p-dialog element opens under p-dialog footer

[Vegim]

[cagataycivici]

Try either appendTo="body" on dialog or allow overflow on dialog.

[ernestomar]

Adding appendTo="body" don't solved the problem. I've added [style]="{width:'200px',position:'fixed'}" to p-dropdown but the button shows on top of dropdown.

[Naveen07]

@Vegim were you able to resolve this issue, I am facing similar issue with a drop down inside dialog.

[cagataycivici]

Do you have any z-index for the button?

[Vegim]

@Naveen07 i have tried the option appendTo=body back then but it didnt worked.

[Naveen07]

@Vegim Did you tried any other approach to get this resolved. I recently started using primeng.

[Vegim]

@Naveen07 Nope, I tried just the approaches mentioned in the answer.

[Naveen07]

@cagataycivici @Vegim I was using primeng's pButton , I tried using a normal button and that fixed the issue :)

[cagataycivici]

That is weird, we need to check this.

[cagataycivici]

I'm unable to replicate;

    <p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="350" responsive="true">
        <span>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
           His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
           Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
           kind and benevolent to those who give respect,
           but given to ruthless violence whenever anything stands against the good of the family.</span>

       <p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" appendTo="body" [style]="{'width':'100%'}"></p-dropdown>

        <p-footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
                <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
                <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
                <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
            </div>
        </p-footer>
    </p-dialog>

Which theme are you using?

[ernestomar]

I'm using Ultima template. I'm trying to reproduce without send my entire project. Please give more time.

[ernestomar]

Sorry cagataycivici It was my mistake. I've been adding the property:

appendTo="body"

To p-dialog instead to p-dropdown

Finally the combination (in p-dropdown):

appendTo="body" [style]="{'width':'100%'}"

Solved my problem.

[Naveen07]

sorry @cagataycivici thank sfor you help , I applied appendTo="body" on p-dialog instead of dropdown. the issue is resolved now. But I have a issue with multi select drop down inside p-dialog.
I was unable to select multiple values at a time from the multiselect dropdown, it gets minimized after every single selection.

this is my code
<p-dialog> <p-multiSelect appendTo = "body" [options]="Data" class="ui-grid-col-4" [style]="{width :'100%'}" > </p-multiSelect> </p-dialog>

[cagataycivici]

Please create another issue for that one.

[andrei-ivanov]

Can you please update the demo page of the _dialog_ with this info?
It was driving me crazy :)

Currently it has this section:

Overlays Inside

When dialog contents include other components with overlays such as dropdown, it is suggested to turn off the overflow of dialog content so that the overlays can be displayed outside of the dialog.

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

The example dropdown should have the appendTo="body" and an example of how to urn off the overflow of dialog content should also be added, as the way I did it didn't work, so I must have done it incorrectly: <p-dialog [contentStyle]="{'overflow': 'hidden'}">

[cagataycivici]

@Mrtcndkn Please add dropdown to the demo of dialog so that we can provide an example.

[Mrtcndkn]

@cagataycivici In progress.

[andrei-ivanov]

Maybe an example of how to turn off the overflow of dialog content too?

[Crunkelton]

appendTo="body" on the p-dropdown fixed the issue for me.

[bhuvhi]

'appendTo="body" will scroll the dropdown menu along with the body/container scroll. Can this be made fixed?

[Crunkelton]

yes

On Fri, Jul 20, 2018 at 4:14 PM bhuvhi [e-mail] wrote:

'appendTo="body" will scroll the dropdown menu along with the
body/container scroll. Can this be made fixed?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/1205#issuecomment-406714622,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AL-AL3TKL5PYzl9uDiknNSiFVTSrtaEQks5uIjoKgaJpZM4KphJ8
.

[hoffmast]

The appendTo option will cause the options of the dropdown to scroll with the page behind it, if the page behind it is large enough to scroll.

Using the [contentStyle]="{'overflow':'visible'}" approach fixes this, but if you have a p-footer, this will not display correctly. In this case, you need to add the following into your CSS, which is functionally equivalent to adding a "ui-g-12" class to the div which holds the footer. It may be good to modify the p-dialog so that the style of the footer (just like the style of the content) can be modified.

p-dialog /deep/ .ui-dialog-footer {
width: 100%;
float: left;
box-sizing: border-box;
padding: .5em;
}

[deveshkrsingh]

@hoffmast I am facing same issue,I have controls like dropdown/auto complete/multiselect and content of all is scrolling after using appendTo='body' with these controls and I have p-footer too.Please help how to resolve it.

[deveshkrsingh]

@hoffmast should I add appendTo='body' to these controls and do i need to add [contentStyle]="{'overflow':'visible'}" with p-dialog?Where we need to add below class and what is /deep/

p-dialog /deep/ .ui-dialog-footer

[hoffmast]

Hello @deveshkrsingh . Sorry if I was unclear. The contentStyle approach and the appendTo approach are two separate approaches; you use one or the other.

To fix your problem, you want to remove the appendTo statements but leave the contentStyle statements. In addition to having the contentStyle, you need to include the CSS (that is, the p-dialog /deep/ .ui-dialog-footer part) into whatever CSS (or SCSS) style sheet corresponds to the HTML file where you have your dialog. Using /deep/ allows you to change the styles of a class that is within a component someone else built. I do not know all the intricacies of /deep/ and know some people do not like to use it (it is technically deprecated I believe), but I do not know of any alternatives, currently.

[deveshkrsingh]

@hoffmast Thanks It worked.I have used [contentStyle]="{'overflow':'visible'}" on p-dialog and I am not using css without deep.

 .ui-dialog-footer {
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding: .5em;
  }

[mayanksudden]

Add in css and i use in angular with nb-accordion

:host {
::ng-deep nb-accordion-item-body > div {
overflow: visible !important;
}
}

and remove appendTo from html

[Abhishek2kr]

'appendTo="body" will scroll the dropdown menu along with the body/container scroll. Can this be made fixed?

@Crunkelton Is this fixed?

[mayanksudden]

Append to body means when you scroll document page then drop-down menu
panel will also scroll with drop-down header.

Please share your requirements.

On Thu, Aug 13, 2020, 17:13 Abhishek Kumar [e-mail] wrote:

'appendTo="body" will scroll the dropdown menu along with the
body/container scroll. Can this be made fixed?

@Crunkelton https://github.com/Crunkelton Is this fixed?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/1205#issuecomment-673428381,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANQ3DQNRWGGTWUVABP7O2MTSAPGU3ANCNFSM4CVGCJ6A
.

[sreejithsrk]

'appendTo="body" is work for me but when we close the dialog using clicking the modal background, the dropdown panel still appearing in the screen, but dialog is closed