come fare a discesa o selezionare la casella in ionica

per favore potete dirmi come fare a discesa come mostrato nell'immagine .Sono utilizzando il framework ionica da here Sto usando discesacome fare a discesa o selezionare la casella in ionica

ecco il mio code

voglio fare così come mostrato data immagine http://ionicframework.com/docs/components/#select

voglio fare solo discesa, come mostrato nell'immagine (testo predefinito nella sinistra) .I vuole diminuire la larghezza di discesa nel documento (come si sta prendendo tutto il larghezza). In secondo luogo non voglio visualizzare alcun testo dal dr op giù

qui è il mio codice

<!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>

fonte

2015-07-12 user944513

Si potrebbe fare questo facendo l'etichetta vuota e ignorando gli stili select con i CSS.

Provate qualcosa come 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; 
}

fonte

2015-07-12 16:31:24 user1234

c'è un "-tastiera up" di classe che sconvolge l'interfaccia utente quando viene cliccato, si fa a sapere come eliminare esso? – Martian2049

Funziona molto bene, è anche facile centrare il menu a discesa nel modulo se lo desideri, utilizzando "margin-left: auto" e "margin-right: auto": item-select { larghezza: 75% ;/* O quello che vorresti fosse la larghezza */ // Centra il menu a discesa: margin-left: auto; margin-right: auto; } – leo

Esiste un modo per mostrare il dropdown ionico come menu a discesa nativo? Proprio come mostrato qui nella prima immagine: 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>

fonte

2015-08-12 13:16:28

questa è la migliore risposta perché usa le cloche ioniche per impostazione predefinita, basta copiare e incollare Lol –

Questo ha funzionato per me:

Template:

<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%; 
}

fonte

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>

fonte

2016-06-07 11:20:46 Aley

come fare a discesa o selezionare la casella in ionica

risposta

Problemi correlati