Geek Answers Handbook

How to make a drop-down menu or select a field in ion

Could you tell me how to take a picture as shown in the image. I am using the ionic structure from here I am using the drop down menu

here is my code

I want to make the image shown http://ionicframework.com/docs/components/#select

I want to make only a drop-down menu, as shown in the figure (the default text is on the left). I want to reduce the width of the drop-down list in the document (since it takes up the entire width). Secondly, I do not want to display any text from the drop-down list

here is my 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>
+6
source share
4 answers

You can do this by making the shortcut blank and overriding select styles with CSS.

Try something like 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; }
+9
source 
 <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>
+4
source

This worked for 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%; }
+1
source 
 .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>
0
source

More articles:


All Articles