如何在ionic2中自定义ion-select弹出窗口的宽度和高度

Question

我希望自定义从 ion-select 打开的弹出窗口的宽度和高度。尝试在互联网上搜索并找到了一些自定义解决方案 css。在 scss 文件中尝试 CSS 以下，但其中 none 有效。由于该应用程序是在平板电脑上使用的，因此我想使用弹出窗口宽度的 50% 并自定义高度，因为默认高度较小。

<ion-item>
   <ion-label>Popup Test</ion-label>
   <ion-select>
       <ion-option *ngFor="let item of items" value="{{item.value}}" >{{item.value}}</ion-option>
   </ion-select>
</ion-item>

SCSS:

  ion-select {
      width: 100%;
      max-width: 100%;
      display: flex;;
      overflow: hidden;
      color: #808080;
  }

  .item{
    border-radius: 10px;
    padding-left: 0px;
    margin-left: 0px;
  }
  .alert-ios {
    border-radius: 10px;
    width: 50%;
    max-width: 50%;
  }

  .alert-wrapper {
    border-radius: 10px;
    width: 50%;
    max-width: 50%;
  }

  .alert-radio-label {
    white-space: normal!important;
  }

我在 ion-select 的离子文档中找不到与此相关的任何内容。你能告诉我如何实现这个功能吗？

Answer 1

在您的 variables.scss 文件中添加以下行：

$alert-ios-content-max-height:700px !default; $alert-md-content-max-height:400px !default;

您可以根据需要更改最大高度。

如何在ionic2中自定义ion-select弹出窗口的宽度和高度

How to customize ion-select popup width and height in ionic2

ionic2

ionic2-select