user944513 user944513 - 5 months ago 39
AngularJS Question

how to make dropdown or select box in ionic

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
http://ionicframework.com/docs/components/#select

here is my code
http://play.ionic.io/app/3e4c1f91d962

I want to make like that as show given image ![enter image description here][1]

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>

Tim Tim
Answer

You could do this by making the label blank and overriding the select styles with CSS.

Try something like: http://play.ionic.io/app/cbd1b0043d8d

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