Menu
could you please tell me how to make drop down as show in image .I am using ionic framework from here I am using dropdown
here is my code
I want to make like that as show given image http://ionicframework.com/docs/components/#select
I want to make only drop down as shown in image (default text in left ) .I want to decrease the width of dropdown in document (as it is taking whole width).Secondly I don't want to display any text from of drop down
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>
400
Selects are form controls to select an option, or options, from a set of options, similar to a native <select> element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list. A select should be used with child <ion-select-option> elements.
place will be the selected item when the ionChange event is triggered. Use (ngModelChange) instead of (click) event. whenever the model value changed the ngModelChange will automatically call the relative function.
You could do this by making the label blank and overriding the select styles with CSS.
Try something like this.
HTML:
<label class="item item-input item-select">
<div class="input-label">
</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;
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
