如何在ionic2中自定义离子选择弹出窗口的宽度和高度

Question

我希望自定义从 ion-select 打开的弹出窗口的宽度和高度。试图在互联网上搜索并找到一些自定义css的解决方案。在 scss 文件中的 CSS 下面尝试过，但都没有工作。由于该应用程序用于平板电脑，因此我想使用弹出窗口宽度的 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;
  }

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

Answer 1

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

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

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