Structure data in items of list

Ionic Framework ionic-v3
1

Hello,

I would like to display 4 different data in 1 single item in a list. Basically, on first line, the article name and in the right, its status. And in a second line, the location and in the right, the insert time. Below is my best attempt to do so, but the insert time is displayed below the location…

<ion-list>
	<ion-item *ngFor='let article of articles'>
		<h2>{{ article.code }} {{ article.name }}</h2>
		<ion-badge item-end>{{ article.status }}</ion-badge>
		<p>{{ article.location }}</p>
		<ion-note right>{{ article.insert_time }}</ion-note>
	</ion-item>
</ion-list>

If I use item-end instead of right, the insert time is moved beside the badge, not below the badge…

Do you have any solution for this ?

Thanks!

2

Use ionic grid for this

Small example (may not work, but should get the point across

<ion-grid>
    <ion-row>
         <ion-col>article.code</ion-col>
          <ion-col text-right>article.status</ion-col>
    </ion-row>
    <ion-row>
         <ion-col>article.location</ion-col>
          <ion-col text-right>article.insert_time</ion-col>
    </ion-row>
</ion-grid>
3

Hello,

(paragraph) makes a line break. see https://www.w3schools.com/tags/tag_p.asp

As MattE said is ion-grid maybe a good solution for you.

Best regards, anna-liebt

4

Thanks for suggestion, looks good!