I got something like the following. A list item with a left thumbnail, middle content and right content.
That works well, at least until there is some wider text in the middle content, e.g. in the h3-element.
What I would like to have is, that the middle content uses as much space as possible, without moving the right content out of view, and then wrapping the text to the next line.
Any idea how to achieve this?
<ion-item-sliding #slidingItem class="item-list-item">
<button ion-item (click)="goToDetail(item)">
<ion-thumbnail item-left>
<ion-img src="/img/thumbnail-img.png"></ion-img>
</ion-thumbnail>
<h3>{{item.name}}</h3>
<p class="author">by {{item.author.name}} ({{item.author.age}}
<p class="location">{{item.location.name}}</p>
<span class="time" item-right>
{{item.startTime | date: 'shortDate'}}
<br>
{{item.startTime | date: 'HH:mm'}}
<span *ngIf="item.endTime">
-<br>
<span *ngIf="item.startTime.toDateString() != item.endTime.toDateString()">
{{item.endTime | date: 'shortDate'}}<br>
</span>
{{item.endTime | date: 'HH:mm'}}
</span>
</span>
</button>
<ion-item-options>
<button favorite (click)="addBookmark(slidingItem, session)" *ngIf="!item.bookmarked">
Bookmark
</button>
<button danger (click)="removeBookmark(slidingItem, session)"
*ngIf="item.bookmarked">
Remove
</button>
</ion-item-options>
</ion-item-sliding>