I am using Ionic2/Angular2. I have a collection of messages
which I loop through and display their details.
<div *ngFor="let message of messages" class="message-wrapper">
<div *ngIf="!exists(message)">
<div *ngIf="message.changeDate">
<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
</div>
<div [class]="'message message-' + message.ownership">
<div class="message-content">server:{{message.content}}</div>
<span class="time-tick">
<span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message.readByReceiver && senderId == message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</div>
As you can see, I am using an if statement (<div *ngIf="!exists(message)">
) to decide whether to display the message
row.
My problem is, even though I have the if statement, and it only displays the correct rows, the non displayed messages
are still taking up scroll space. What I mean by that is that there are blank spaces where the non displayed messages
would be.
As you can see here, there is some empty space after the last message.
Question
Can I structure this html
so that if the row is filtered, it does not not take up any space?
Thanks