CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
johnny 5
johnny 5

Reputation: 20987

Ionic 2 Cannot view span inside of ion-item, how to render simple text

I'm not sure if I'm missing something, but when I try to add a span to a Ion Item the span is not rendered, nor div.

<ion-card>
  <ion-card-title>
  </ion-card-title>
  <div>
    <button ion-button (click)="toggleEdit()">Edit</button>
  </div>
  <ion-list>
    <ion-card-content>
      <ion-item [hidden]="editOptions.!isEditing">
        <span class="inline-edit">Text</span>

        <ion-label color="primary">{{label}}</ion-label>
        <ion-input></ion-input>
        <span class="inline-edit">{{value}}&nbsp;</span>
      </ion-item>
      <ion-item [hidden]="!editOptions.isEditing">
        <ion-label color="primary">{{label}}</ion-label>
        <ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input>
      </ion-item>
    </ion-card-content>
  </ion-list>
</ion-card>

Ion label and Input display and work fine, but how when I try to use a span or a div in an Item they aren't rendering. Even when I inspect them in chrome.

How can I render simple text, Am I not allowed to use HTML in a component? What Is the Ionic 2 equivently for rendering small amounts of text, it appears labels have to always be over an input, so what component should I use?

Upvotes: 2

Views: 5572

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

That's because of how content projection works, the ion-item will only render some components (like the ion-label and the ion-input) but will ignore some other html elements.

There may be other ways to fix it, but AFAIK you have two choices:

1) If the text is just a small text , you can use notes.

A note is detailed item in an ion-item. It creates greyed out element that can be on the left or right side of an item.

<ion-content>
  <ion-list>
    <ion-item>
      <ion-note item-start>
        Left Note
      </ion-note>
      My Item
      <ion-note item-end>
        Right Note
      </ion-note>
    </ion-item>
  </ion-list>
</ion-content>

You can then play with the style rules to adapt it to your scenario.

2) Add the item-start, item-end, item-left, item-right or item-content attribute to the ignored html elements. 

Attribute       Description
item-start      Placed to the left of all other elements, outside of the inner item.
item-end        Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
item-content    Placed to the right of any ion-label, inside of the input wrapper.

Please take a look at this plunker so you can play with those attributes until you get the desired layout.

  <ion-item style="background: transparent;">
      <span item-content class="inline-edit">Text</span>
      <ion-label color="primary">Label</ion-label>
      <ion-input></ion-input>
      <span item-content class="inline-edit">Value</span>
  </ion-item>

Upvotes: 8

Related Questions