Ionic ion-select, ion-select-option

Question

I have create a new project ionic with capacitor. I use use ion-select, but i have i new ion-select-option with(by) large text, not distriute in input.

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>

  </ion-select>
</ion-item>

How to change this properties for view all text. show my image

Answer 1

Thanks for your help. I try this way it´s work // ionic 6 version

ion-select::part(text) {
    white-space: normal !important;
    transform: none !important;
}

Answer 2

To display all your text inside the ion-select, you can use the ion-text-wrap class on your ion-select-option. This class is provided by Ionic CSS utilities (https://ionicframework.com/docs/layout/css-utilities). Your code shoud look like this :

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option class="ion-text-wrap" value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>
  </ion-select>
</ion-item>

EDIT : It seems that the ion-text-wrap class does not wrap the text in the ion-select textbox. Since this element is in the shadowroot, you need to use some javascript to apply style dynamically.

So you need to first give an #id to your ion-select component and add a callback to the (ionChange) event :

<ion-item text-wrap>
    <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
    <ion-select (ionChange)="editShadowStyle()" id="my-select">
        <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria,
            Mancha
            marrón de las
            mandarinas (primavera)
        </ion-select-option>
    </ion-select>
</ion-item>

Then, in your typescript file, define this function :

editShadowStyle() {
    let textbox = document
      .getElementById("my-select")
      .shadowRoot.querySelector("div");
    textbox.setAttribute("style", "white-space:pre-line");
}

This way, each time you will select an option in the ion-select, the shadowroot element style will be edited. Please see result below : https://stackblitz.com/edit/ionic-v4-fztn1b?file=src/app/app.component.ts