CODEWITHSUNDEEP
javascriptangularjscssangularjs-directiveionic-framework
user944513
user944513

Reputation: 12729

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

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>

Upvotes: 6

Views: 52254

Answers (4)

user1234
user1234

Reputation: 8978

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">
        &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;
}

Upvotes: 9

Aley
Aley

Reputation: 8640

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

Upvotes: 0

Ashok Goli
Ashok Goli

Reputation: 5183

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

Upvotes: 1

Rahul Chouhan
Rahul Chouhan

Reputation: 41

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

Upvotes: 4

Related Questions