如何在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

你根本不需要！重要！ Ionic 已指定最小宽度为 45%（或根据您的 ionic 版本而定）。您所要做的就是使用 100% 的最大宽度覆盖它。同时，选择作为内联元素，只会扩展以适合其内容。所以它不会填满整个宽度。因此，要实现这一点，您只需添加

width: 100%

即可。所以你的最终 CSS 类可能看起来像这样：

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

Answer 4

我尝试了每个解决方案，但找到了一个完美的方法来做到这一点:) 只需添加以下内容即可修改您的 sass 文件

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

Answer 5

这对我有帮助。在阅读了多篇文章后，我在这篇堆栈溢出文章〜使用弹出界面设计离子选择中发现，如果打开开发者工具并使用检查工具，您可以看到直接影响选择选项的类。

现在我们知道这些类是

.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 及更高版本，但我认为这仍然会有帮助

Answer 6

路易斯·安东尼奥·佩斯塔纳（Luis Antonio Pestana）的答案很好，如果你将其与他最初问题的代码联系起来。更清楚地说，让 ion-select 占据其容器 100% 的完整代码是：

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

Answer 7

我必须使用

.alert-wrapper

强制

!important

为全宽。

.alert-wrapper {
  width: 100% !important;
}