Does not work in ion-item next to ion-label

[mebibou]

So I want to use this component in a form, like you would usually do with an input:

<ion-item>
  <ion-label color="dark" fixed text-wrap>Label</ion-label>
  <ion-input type="text" formControlName="label"></ion-input>
</ion-item>

Which end up looking like:

<ion-item>
  <ion-label color="dark" fixed text-wrap>Label</ion-label>
  <ion-auto-complete [dataProvider]="service"></ion-auto-complete>
</ion-item>

The weird thing (or maybe just my lack of knowledge) is that the autocomplete is just not there at all. If I remove the ion-label element, it does appear though.

[kamok]

Try this:

      <div class="employer-wrap">
        <ion-item [ngClass]="{'valid':form.controls['address'].status === 'VALID'}" class="employer-item">
          <ion-label [ngClass]="{'employer-label-valid':form.controls['address'].status === 'VALID'}" class="employer-label required-label">{{ inputArray['address'].label | translate }}</ion-label>
        </ion-item>
        <ion-auto-complete [ngClass]="{'valid':form.controls['address'].status === 'VALID'}"
        class="employer-typeahead" [dataProvider]="addressAutocompleteService"
        (ionAutoInput)="onAddressInput($event)"
        (itemSelected)="onAddressSelected($event)"
        [options]="{ showCancelButton: false }" #addressFormField></ion-auto-complete>
      </div>

[kamok]

You'll have to work some magic with the employer-wrap css things to make it look good. But yea it doesn't work out of the box.

[mebibou]

Sure, this is a workaround, but why doesn't it work like an ion-input ?

[mebibou]

Oh sorry got it:

<ion-item>
  <ion-label color="dark" fixed text-wrap>Label</ion-label>
  <ion-auto-complete item-content [dataProvider]="service"></ion-auto-complete>
</ion-item>

Don't forget to add item-content attribute