如何在IONIC 2中设置100%宽度的离子选择元件

Question

我想设置100%宽度的离子选择.

我试过像这样的css类:

.mySelect { width: 100% !important; }

但它没有用.

Answer 1

我做的.

对于想要解决方案的人,这里是代码:

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

您必须覆盖'max-width'css属性.

Answer 2

增加选择器的特异性允许在没有!important的情况下执行它:

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

这使得它更清洁,因为!important应该尽可能少地使用,如Stack Overflow文章中所述: 我应该避免在CSS中使用!important吗？

Answer 3

你根本不需要!重要!离子指定的最小宽度为45%(或根据您的离子版本而定).您所要做的就是超越它,最大宽度为100%.同时,作为内联元素的select将仅扩展以适合其内容.所以它不会填满整个宽度.因此,为了实现这一点,您只需添加width: 100%它即可.所以你的最终CSS类看起来像这样:

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