如何在 IONIC 2 中设置宽度为 100% 的 ion-select 组件

Question

我想将我的 ion-select 设置为 100% 的宽度。

我试过 css class 这样的：

.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 文章中所述： Should I avoid using !important in CSS?

Answer 3

如果您将路易斯·安东尼奥·佩斯塔纳 (Luis Antonio Pestana) 的回答与他最初问题的代码联系起来，那么他的回答很好。所以更清楚一点，让 ion-select 100% 占用其容器的完整代码是：

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

Answer 4

你根本不需要 !important！ Ionic 已将最小宽度指定为 45%（或根据您的 ionic 版本指定的任何值）。您所要做的就是用 100% 的最大宽度覆盖它。同时，作为内联元素的 select 只会展开以适应其内容。所以它不会填满整个宽度。因此，要实现这一点，您只需向其中添加 width: 100% 即可。所以你的最终 CSS class 可能看起来像这样：

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

Answer 5

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

修改您的 sass 文件

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

Answer 6

这对我有帮助。看了多篇文章，发现这篇stack overflow的文章~，打开开发者工具，使用inspect工具，可以看到直接影响[=26]的class =]选项。

现在我们知道 class 是 .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 及更高版本，但我认为这仍然会有帮助

如何在 IONIC 2 中设置宽度为 100% 的 ion-select 组件

How to set ion-select component with 100% width in IONIC 2

ionic2