Ion-option in ion-select doesn't use full width

Ionic Framework ionic-v3
1

I have multiple ion-items in one line, but as you can see in the screenshot the option doesn’t expand all the way across the select (I’ve drawn a border around every item/ div so that you can see their dimensions).
It only says “prefix” so it’s not that the text is too long.

I’ve tried setting the width of both the option and select too 100% even with !important in css but it doesn’t change anything, even when I try to use a set amount of pixels (e.g. width: 200px;). They say you should do this in this forum post but that doesn’t work for me.

ion-option-small

I did find this issue on github https://github.com/ionic-team/ionic/issues/5715 but it seems I’m still having the same issue.

My html code:

<ion-item class="container-prefix box">
   <!--ion-label>{{'LINER.PREFIX' | translate}}</ion-label-->
   <ion-select class="box prefix-select" [(ngModel)]="prefixValue" (ionChange)="prefixWasSelected()" 
      interface="popover" placeholder="prefix">
         <ion-option class="box prefix-option" *ngFor="let prefix of prefixes" [value]="prefix">
            {{prefix}}
         </ion-option>
    </ion-select>
</ion-item>
1 Like
2

I fixed it by applying max-width: 100% !important; to the ion-select.

5 Likes
3

Thank you so much!!! worked for ionic v6!

1 Like