Ionic multi-line ion-option

Ionic Framework ionic-v3
1

I’m trying to create an ion-select with ion-options that contain multiple lines but the framework seems to strip out any html elements added into the option. Any way around this?

<ion-select>
<ion-option>
test<br/>test
</ion-option>
</ion-select>
2

try to use p tag into your test

3

did you find the solution?

4

No, not exactly. I had to settle for using a radio list and wound up with this:

<ion-list radio-group formControlName="selection">
      <ion-list-header>
        Options
      </ion-list-header>
      <ion-item *ngFor="let option of options">
        <ion-label>
             <div>{{option.name}}</div>
             <div>{{option.description}}</div>
        </ion-label>
        <ion-radio checked="true" [value]="option.id"></ion-radio>
      </ion-item>
</ion-list>
5

It’s because ionic modificates all html between ion-option. It removes all tags / selectors.

Input:

<ion-option>
  <div class="title">One</div>
  <div class="sub">Two</div>
</ion-option>

Output (compiled):

<ion-label>
       One

       Two
</ion-label>

(of course leading and trailing white-spaces.

So, there is nothing to refer, no selector for css.

A solution could be: Create your own select-option component. Note, you can also display it as modal and popover.

In my opinion Ionic should not touch the value (tag-content) of option. Keep the html-tags!