2016-12-19 9 views
0

IonicプロジェクトのモーダルでGoogleプレイスオートコンプリートをレンダリングしようとしています。GoogleプレイスIonicモーダルではオートコンプリート候補がクリックできない

私はテンプレートとモーダルをレンダリングしています:正しい場所で期待どおりに

<script id="modal.html" type="text/ng-template"> 
    <div class="modal"> 
    <header class="bar bar-header bar-light"> 
     <h1 class="title">Create event</h1> 
     <div class="button button-clear" ng-click="close()"><span class="icon ion-close"></span></div> 
    </header> 
    <content has-header="true" padding="true"> 
       <label class="item item-input item-light"> 
       <input type="text" g-places-autocomplete ng-model="event.venue" placeholder="Venue/Location"> 
       </label> 
    </content> 
    </div> 
</script> 

Googleプレイスの提案は、レンダリング、しかしunclickabeです。 Web上で多くの検索を行うと、pac-containerクラスのz-index問題が示唆されていますが、このz-indexを変更しても問題は解決しません。

要素インスペクタを使用すると、pac-containerを含むオートコンプリート要素が開始ボディタグの直後に動的に追加されるため、DOMで要素が表示される順番が問題になると思います。閉じたbodyタグの直前にレンダリングされているので、z-indexに関係なく、pac-containerはモーダルの下にあります。

以上、私は本当に立ち往生しています。どんな提案も大歓迎です。

答えて

1

イオンフォーラムにいくつかの素晴らしいアドバイスを以下の後、溶液は次のとおりです。

.pac-container { 
     z-index: 3000 !important; 
     } 
.modal-open { 
      pointer-events: auto !important; 
     } 
関連する問題