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

Question

am looking to customize the width and height of the popup opened from ion-select. Tried to search in internet and found some solutions to customize css. Tried below CSS in scss file, but none of them worked. Since the app is used in tablet, I want to use up 50% of the width for the popup and also customize the height, since default height is less.

<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;
  }

I could not find anything related to this in ionic documentation for ion-select. Can you pls let me know how do I achieve this functionality?

Answer 1

In your variables.scss file add the following lines:

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

you can change max-height as per your needs.