ION 2で100％幅のイオン選択成分を設定する方法

Question

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

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

.mySelect { width: 100% !important; } 

しかし、それは動作しません。

Answer 1

私はそれをしました。解決策を望んでいる誰かのために

は、ここでのコードは次のとおりです。

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

あなたは「最大幅」のCSSプロパティをオーバーライドしている必要があります。 ！セレクターの特異性を増加

Answer 2

はそれで重要せずにそれをやってすることができます：

に述べたように重要なのは、難できるだけ使わなければならないので、それは少しきれいになり

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

！スタックオーバーフローの記事はこちら Should I avoid using !important in CSS?

Answer 3

Luis Antonio Pestanaの回答は、最初の質問のコードと関連付けるとよいです。だから、より明確にするために、イオン選択そのコンテナの100％を取るを取得するための完全なコードは次のとおりです。

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

Answer 4

あなたはを必要としないで、すべての重要な！ Ionicは最小幅45％（またはあなたのイオンのバージョンごとに）を指定しています。あなたがしなければならないのは、100％の最大幅でオーバーライドすることだけです。同時に、インライン要素であるselectは、その内容に合わせて拡張されます。それで、それは全体の幅を埋めることはありません。ですから、これにはwidth: 100%を追加するだけです。だからあなたの最後のCSSクラスは次のようになります。

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

Answer 5

私はそれぞれのソリューションを試したが、これを行うのに最適な方法を見つけました:) 誰もがすることができます。この

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