2016-11-10 4 views
1

Ich habe eine einfache Wählen Sie Element für die Sprache der App wählen. Dies ist die Ansicht Code:Tippen/klicken Sie auf Select-Element funktioniert nicht auf dem mobilen Gerät mit Ionic Framework

<ion-view title={{i18n.settings.title}}> 
    <ion-nav-buttons side="left"> 
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    <ion-content > 
    <div class="list"> 
     <label class="item item-input item-select"> 
     <div class="input-label" > 
      {{i18n.settings.select_language}} 
     </div> 
     <select class="ion-input-select" ng-model="language" ng-change="changeLanguage(language)"> 
      <option value="es">{{i18n.settings.spanish}}</option> 
      <option value="en">{{i18n.settings.english}}</option> 
     </select> 
     </label> 
    </div> 
    </ion-content> 
</ion-view> 

Das erwartete Ergebnis ist natürlich, klicken Sie auf den wählen und Optionen sollten angezeigt werden: enter image description here

Es funktioniert perfekt, wenn ich die App in einem Desktop-Browser öffnen (Ich verwende Chrome) und klicke auf die Auswahl mit der Maus.

Die Sache ist, ich habe einen Touchscreen-Laptop, also wenn ich versuche, die Auswahl mit meinem Finger zu tippen, funktioniert es nicht. Das Gleiche passiert, wenn ich die App in einem Browser für Mobilgeräte (Android 6) öffne (unter Verwendung von Chrome).

Genauer gesagt, es funktioniert nur, wenn ich mit dem Finger ungefähr über das rote Rechteck tappe, das ich im angehängten Bild markiert habe, aber nicht, wenn ich oben auf dem Rest der wählen Sie Element.

Anmerkung 1: Es gibt keine CSS für diese Ansicht, dass einige Konflikte mit dem wählen Verhalten erstellen können. Anmerkung 2: Ich erhalte keine Fehler auf der Konsole

Ionic Version: 1.1.0

Antwort

0

Ich glaube, Sie die div ändern sollte:

mit
<div class="input-label" > 
      {{i18n.settings.select_language}} 
     </div> 
     <select class="ion-input-select" ng-model="language" ng-change="changeLanguage(language)"> 
      <option value="es">{{i18n.settings.spanish}}</option> 
      <option value="en">{{i18n.settings.english}}</option> 
     </select> 

zu beschriften Text und wählen Kontrolle:

<label class = "item item-input item-select"> 
    <div class = "input-label"> 
     {{i18n.settings.select_language}} 
    </div> 

    <select class="ion-input-select" ng-model="language" ng-change="changeLanguage(language)"> 
       <option value="es">{{i18n.settings.spanish}}</option> 
       <option value="en">{{i18n.settings.english}}</option> 
      </select> 
</label> 
+0

Sorry, das war mein erster Ansatz wie in der Ionic-Dokumentation angegeben wird, wenn Sie ein * verwenden wählen * Element. Ich werde den Code mit dem ursprünglichen Code aktualisieren (mit dem Element * label *), was immer noch nicht funktioniert – daniegarcia254

+0

Sie können auf diesen Link verweisen: http://codepen.io/grimen/pen/skfih –

1

Es scheint, dass nach Update der Ionic Framework-Version von 1.1.0 auf 1.3.2, der Fehler wurde behoben.

Jetzt funktioniert es gut in jedem dispositve: Touch-Screen-Laptop, Desktop-Browser, mobilen Gerät Browser und Android APK

Verwandte Themen