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

Ionic Framework ionic-v3
1

Hi, 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?

2 Likes
2

Hey. I had the similar issue. Finally today I find out how to solve this issue. Don’t know if it’s relevant for you or no anymore… anyways the solution is you have to override ionic sass variables.
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.

2 Likes