CSS for Ionic 2 Select Option

Ionic Framework ionic-v3
1

The standard html for an ionic 2 selection inside an ion-list is

...
<ion-item>
    <ion-label>Relationship</ion-label>
    <ion-select [(ngModel)]="relationship">
        <ion-option value="Spouse">1. Spouse / De Facto</ion-option>
        <ion-option value="Carer">2. Unpaid Carer</ion-option>
        <ion-option value="Friend">3. Friend / Family</ion-option> 
    </ion-select>
</ion-item>
...

However this produces some unsightly results when the selection entryis slightly oversized, e.g.

image

Is there a way to alter the format in CSS? I tried
<ion-select class="fancy-select" [(ngModel)]="relationship">
and in the css:

.fancy-select{
  padding: 0;
  white-space: normal;
  display: block;
  text-align: left;
}

I also tried adding formatting to the label - but nothing seems to make much impact…

1 Like
2

I am looking for a solution too. Anyone knows anything about how to customize css of ion-select and ion-option?

1 Like
3

Anyone have an answer yet? this has been an issue for 2 years?