How to make <ion-select> label narrower?

Ionic Framework ionic-v3
1

Similar to this which never got an answer… How to control the ion-label width?:

If I instantiate a standard ion-select:

<ion-item>
    <ion-label>hooray</ion-label>
    <ion-select>
      <ion-option>a_very_long_option</ion-option>
      <ion-option>an_even_longer_option</ion-option>
    </ion-select>
</ion-item>

The ion-label gets 50% of the width and the ion-select gets the other 50%. But my label is short and my options are long, so I would rather have the label be 20% and the select be 80%. For the life of me, I can’t get it to happen. Help?

2

Try this…

.html file

.scss file

1 Like
3

Thanks for the suggestion, Ellezo. That didn’t work for me, but it got me looking at using min-width, and here is what does work:

html:

<ion-item class="selw75">
    <ion-label>hooray</ion-label>
    <ion-select>
      <ion-option>a_very_long_option</ion-option>
      <ion-option>an_even_longer_option</ion-option>
    </ion-select>
</ion-item>

css:

ion-item.selw75 {
  ion-label {
    min-width: 25%;
  }
  ion-select {
    min-width: 75%;
  }
}
4

Glad that you figured it out. :slight_smile: