wie Drop-Down-oder Auswahlbox in ionischer

machen könnten Sie mir bitte sagen, wie als Show in Bild machen Dropdown .Ich aus here ionischen Rahmen verwende ich bin mit Drop-Down-wie Drop-Down-oder Auswahlbox in ionischer

hier ist mein code

ich möchte so machen, wie Show gegeben Bild http://ionicframework.com/docs/components/#select

ich nur Dropdown machen will, wie (in der linken Standardtext) in Bild gezeigt .Ich möchte die Breite des Drop-Down-in-Dokument verringern (wie es insgesamt nimmt Breite). Zweitens möchte ich keinen Text von dr anzeigen op unten

hier ist mein Code

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
</head> 

<body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <div> View</div> 
      <div class="list"> 

       <label class="item item-input item-select"> 
        <div class="input-label"> 
         Lightsaber 
        </div> 
        <select> 
         <option selected>Default</option> 
         <option >Green</option> 
         <option>Red</option> 
        </select> 
       </label> 

      </div> 
     </ion-content> 
    </ion-pane> 
</body> 

</html>

Quelle

2015-07-12 user944513

Sie dies, indem das Etikett leer und Überschreiben der select Stile mit CSS tun könnte.

versuchen, etwas wie this.

HTML:

<label class="item item-input item-select"> 
    <div class="input-label"> 
     &nbsp; 
    </div> 
    <select> 
     <option selected>Default</option> 
     <option >Green</option> 
     <option>Red</option> 
    </select> 
</label>

CSS:

.item-select { 
    width: 75%; /* Or whatever you'd like the width to be */ 
} 

.item-select select { 
    left: 0; 
}

Quelle

2015-07-12 16:31:24 user1234

gibt es eine "Schlüssel-Board-up" Klasse, die die UI stört, wenn es angeklickt wird, wissen Sie, wie es zu unterdrücken? – Martian2049

Das funktioniert wirklich gut, es ist auch einfach, den Drop-Down in der Form zu zentrieren, wenn Sie so wollen, von "margin-left: auto" mit und "margin-right: auto": Artikel-select { Breite: 75% ;/* Oder was auch immer würden Sie die Breite wie */ // Center zu sein die Drop-Down-: margin-left: auto; Rand rechts: Auto; } – leo

Gibt es eine Möglichkeit ionischen Tropfen zeigt nach unten als native Drop-down? Genau wie in dem ersten hier gezeigten Bild: http://baymard.com/blog/mobile-dropdown-navigation – TechTurtle

<div class="list"> 

    <label class="item item-input item-select"> 
    <div class="input-label"> 
     Lightsaber 
    </div> 
    <select> 
     <option>Blue</option> 
     <option selected>Green</option> 
     <option>Red</option> 
    </select> 
    </label> 

</div>

Quelle

2015-08-12 13:16:28

dies ist die beste Antwort, weil es standardmäßig ionischen clases verwenden, einfach kopieren und einfügen Lol –

Das ist für mich gearbeitet:

Vorlage:

<ion-item class="item-input item-select"> 
    <div class="input-label"> 
     Select Label 
    </div> 
    <select> 
     <option selected>Option 1</option> 
     <option>Option 2</option> 
    </select> 
    </ion-item>

CSS:

.item-select select, .item-select select option{ 
    left: 75%; 
}

Quelle

2015-12-01 08:06:25

.item-select { 
    height: 40px; 
} 

.item-select select { 
    max-width: 100%; 
    width: 100%; 
} 

<div class="list"> 
    <label class="item item-input item-select"> 
     <select> 
      <option selected>Default</option> 
      <option>Green</option> 
      <option>Red</option> 
     </select> 
    </label> 
</div>

Quelle

2016-06-07 11:20:46 Aley

wie Drop-Down-oder Auswahlbox in ionischer

Antwort

Verwandte Themen