How can I make a progress bar animation stretch across an ion-item?


#1

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 || '&nbsp;'}}</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