Right align ion-select with popover

Right now I have an ion-select element on my page that I would like to have right aligned with a popover.

This is the code for my ion-select:

<ion-item lines="none">
    <ion-select (ionChange)="selectLang($event)" [(ngModel)]="language" interface="popover" [disabled]="loading">
         <ion-select-option value="en_US">{{ 'segments.en_US' | translate }}</ion-select-option>
         <ion-select-option value="es_MX">{{ 'segments.es_MX' | translate }}</ion-select-option>
    </ion-select>
</ion-item>

And the css for the html:

ion-select {
    width: 100%;
    text-align: right;
}

This is how it is displayed in the app:

When activated:

And the popover:

Can I get the activated backdrop to just cover the select and not the entire width of the ion-select, and how can I get the popover to be right aligned?

Appreciate any guidance.

1 post - 1 participant

Read full topic