Address dropdown not showing up when the googleplace is placed on a Modal.

[jacksonmj24]

The API is firing Up ans I'm getting the response. But still, the drop down does not show up. Works fine on normal pages.

[rajan-g]

may I get your code details..

[toregua]

I have the same issue inside an primeng modal, no problem in a normal component :

<p-dialog header="Créer un agenda" [(visible)]="afficherModalAgenda" styleClass="fullscreen" modal="modal" [responsive]="true" showEffect="fade" appendTo="body">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 ui-md-4">
            <div class="md-inputfield">
                <input type="text" pInputText placeholder="" formControlName="localisationLibelle" id="localisationLibelle" autocomplete="nope" (setAddress)="getAddress($event)" googleplace/>
                <label>Localisation</label>
                <control-messages [control]="form.controls.localisationLibelle"></control-messages>
            </div>
        </div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="submit" pButton icon="fa-reply" label="Créer" (click)="saveModalAjouterAgenda()" [disabled]="!agendaFormPage?.form?.valid"></button>
            <button type="button" pButton icon="fa-close" class="btn-default" (click)="afficherModalAgenda=false" label="Annuler"></button>
        </div>
    </p-footer>
</p-dialog>

[toregua]

I have found the solution, it is just CSS z-index problem, add this in your css and everything will be ok :

.pac-container {
    z-index: 99999;
}