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

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=".0.0/css/ionic.min.css" rel="stylesheet">
    <script src=".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>

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

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>

Share Improve this question edited Feb 10, 2017 at 7:48 Blu 4,0566 gold badges40 silver badges65 bronze badges asked Jul 12, 2015 at 15:51 user944513 12.7k51 gold badges185 silver badges346 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 9

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

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to make dropdown or select box in ionic - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)