Here’s my item markup. The problem I have is that my progress bar only stretches across the center content. The item-left and item-right put caps on; I’d like it to stretch across the entire ion-item. Anyway of doing this?
<ion-item>
<ion-avatar item-left>
<img [src]="message.contact ? message.contact.photoUrl : ''" />
</ion-avatar>
<h2>
<i *ngIf="message.isUrgent" class="fa fa-exclamation" aria-hidden="true"></i>{{message.contact ? message.contact.firstName + ' ' + message.contact.lastName : message.source}}
</h2>
<p>{{message.note || ' '}}</p>
<small>{{message.length | amDuration:'seconds'}}</small>
<ion-note item-right>
<small>{{message.timestamp | amTimeAgo}}</small>
</ion-note>
<progress [value]="position" max="1"></progress>
</ion-item>
Similar to this question How to achieve progress-bar animation on ion-item or header(footer)-bar