web-dev-qa-db-ja.com

ionicでドロップダウンまたは選択ボックスを作成する方法

画像に表示されているようにドロップダウンを作成する方法を教えてください。（</>/=）からionicフレームワークを使用しています ここに ドロップダウンを使用しています

ここに私の コードがあります

与えられた画像を表示するように私はそのようにしたい http://ionicframework.com/docs/components/#select

画像に示されているようにドロップダウンのみを作成したい（左のデフォルトのテキスト）。ドキュメントのドロップダウンの幅を小さくしたい（幅全体を使用しているため）。ダウン

これが私のコードです

<!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>
javascriptangularjscssangularjs-directiveionic-framework
6
user944513

これを行うには、ラベルを空白にし、CSSでselectスタイルをオーバーライドします。

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
user1234
<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
Rahul Chouhan

これは私のために働きました：

テンプレート：

  <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
Ashok Felix
.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
Aley