CODEWITHSUNDEEP
javascriptcssangularionic-frameworkionic4
ocuenca
ocuenca

Reputation: 39326

How to customize ion-select popup height in ionic

I'm trying to override the max-height of a div that groups the elements in the popup using interfaceOptions attribute but I haven't had luck so far, this what I have so far:

 customOptions: Record<string, string> = {
    header: this.translate.instant('mobile.giving.deductionStartDateHeader'),
    cssClass: 'ion-select-max-height'
  };
.ion-select-max-height {
 .alert-radio-group {
      max-height: 100%!important;
      }
}
<ion-select [interfaceOptions]="customOptions" [formControlName]="fields.deductionStartDate">
    <ion-select-option *ngFor='let date of company.possibleDeductionDates | slice:0:6' [value]="date">
                {{ date | date:'mediumDate' }}
    </ion-select-option>
</ion-select>

How can I change the max-height of div that has as class .alert-radio-group, without overwriting global classes?

enter image description here

Upvotes: 0

Views: 3657

Answers (1)

ocuenca
ocuenca

Reputation: 39326

If I use ng-deep in front of the class I created to pass to cssClass attribute then it overrides the class I want to modify in the popup:

::ng-deep .ion-select-max-height {
 .alert-radio-group {
      max-height: 100%;
      }
}

I'm still learning styling in angular but I read what ng-deep does is to force a style down to child components, I saw the ion-alert is injected into the DOM, so I guessed it was a child component

Upvotes: 1

Related Questions