Автозаполнение мест API Google в bootstrap модальные не отображаются даже в DOM - PullRequest
Новая
       42

Автозаполнение мест API Google в bootstrap модальные не отображаются даже в DOM

0 голосов
/ 27 января 2020

Я создал простой ввод, который будет содержать Google Места API autocomplete. 

<input #search placeholder="Search location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control">

Работает отлично. Но когда я комбинирую его с bootstrap модальным, он не появляется ни в DOM. Я искал различные решения rnet, которые в коротких словах просят меня поставить класс css на элемент, но проблема не в DOM, ie. 

.pac-container {
    background-color: #FFF;
    z-index: 1051 !important;
    position: fixed;
    display: inline-block;
    float: left;
}

, но это не так Работа.

Мне интересно, почему, если поместить его в bootstrap модальные эффекты, не появляется даже в DOM? Почему установка более высокого значения z-index даже в кадре этого входа также не работает?

Я запускаю модальный режим таким образом: 

const modalRef = this.modalService.open(content);
        if (data) {
            modalRef.componentInstance.data = data;
        }

, который modalService от import { NgbModal } from '@ng-bootstrap/ng-bootstrap'

Мой автозаполнение также находится в ng-template. 

<ng-template #forNewEvent>
    <a [ngClass]="{'pt-0': newEvent}" class="card-body my-auto">
        <div class="d-flex justify-content-end align-content-center align-items-center my-3">
            <div *ngIf="!canAction" class="d-flex te-pointer">
                <h6 class="text-uppercase text-muted mb-0 d-flex align-items-center mr-3">
                    Organizer:
                </h6>
                <div class="avatar avatar-sm mr-2">
                    <img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
                </div>
                <h6 class="text-uppercase text-muted mb-0 d-flex align-items-center">
                    {{event.owner.name}}
                </h6>
            </div>
        </div>

        <!--        <form [formGroup]="newEventForm" (ngSubmit)="onNewEventSubmit()">-->
        <div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span (click)="d.toggle()" class="input-group-text">
                        <i class="fe fe-calendar"></i>
                    </span>
                </div>
                <input (click)="d.toggle()"
                       [(ngModel)]="model"
                       ngbDatepicker
                       #d="ngbDatepicker"
                       type="text" class="form-control form-control-flush" placeholder="When the Event should be?">
            </div>
            <div class="form-label-group">
                <input type="text" class="form-control form-control-flush" id="title" placeholder="Event title">
                <label for="title">Title</label>
                <input #search placeholder="Search location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control">
            </div>
            <div class="form-label-group">
                <textarea class="form-control form-control-flush" id="description" placeholder="Event description"></textarea>
                <label for="description">Description</label>
            </div>
</ng-template>
...