web-dev-qa-db-ja.com

IONIC 2で100％幅のイオン選択コンポーネントを設定する方法

イオン選択を100％の幅に設定したいと思います。

私はこのようなCSSクラスで試しました：

.mySelect { width: 100% !important; }

しかし、それは機能していません。

ionic2
15
Luis Antonio Pestana

やったよ。

ソリューションが必要な人のために、コードを以下に示します。

.myCustomSelect{
  max-width: 100% !important;
}

'max-width' cssプロパティをオーバーライドする必要があります。

29
Luis Antonio Pestana

セレクターの特異性を高めると、！importantを使用せずにセレクターを行うことができます。

ion-select.myCustomSelect{
  width: 100%;
  max-width: 100%;
}

ここでStack Overflowの記事に記載されているように、！importantはできる限り控えめに使用する必要があるため、これは少し簡潔になります： CSSでは！importantの使用を避けるべきですか？

10
Uniphonic

！importantはまったく必要ありません！ Ionicは45％の最小幅（またはionicのバージョンに応じて何でも）を指定しました。100％の最大幅でオーバーライドするだけです。同時に、インライン要素であるselectは、その内容に合わせて拡張するだけなので、幅全体を埋めることはできません。そのためには、単にwidth: 100%それに。したがって、最終的なCSSクラスは次のようになります。

.full-width-select {
  width: 100%;
  max-width: 100%;
}
7
Devner

私は各ソリューションを試してみましたが、これを行うための完璧な方法を見つけました:)これを追加してsassファイルを変更するだけです

ion-select{
    max-width: 70% !important;// your choice :)
}
3
Kishan Oza

ルイス・アントニオ・ペスターナからの答えは、彼の最初の質問のコードと関連付けると良いでしょう。したがって、より明確にするために、イオン選択にコンテナを100％使用させる完全なコードは次のとおりです。

.your_ion_select {
    max-width: 100% !important;
    width: 100% !important;
}
0
fraxool