如何在IONIC 2

Question

我想设置100％宽度的离子选择。

我尝试过像这样的css类：

.mySelect { width: 100% !important; }

但它没有用。

Answer 1

我做到了。

对于想要解决方案的人，这里是代码：

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

您必须覆盖＆＃39; max-width＆＃39; css property。

Answer 2

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

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

这使得它更清洁，因为！important应该尽可能少地使用，如Stack Overflow文章中所述： Should I avoid using !important in CSS?

Answer 3

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

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

Answer 4

我尝试了每个解决方案，但找到了完美的方法:) 只需通过添加此

修改您的sass文件

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

Answer 5

路易斯·安东尼奥·佩斯塔纳（Luis Antonio Pestana）的答案很好，如果你把它与他最初的问题的代码联系起来。所以更清楚的是，让离子选择占据其容器100％的完整代码是：

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

Answer 6

这对我有帮助。看了多篇文章，发现这篇stackoverflow文章~Styling ion-select with popover interface，如果打开开发者工具，使用inspect工具，可以看到直接影响select选项的类。

既然我们知道类是 .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md，我们就可以在 global.scss 文件中添加调整它

像这样

:root{
   .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
      max-width: 100% !important;
      width: 100% !important;
}

我目前正在使用 Ionicv4 及更高版本，但我认为这仍然会有所帮助