Can anyone explain why the first li item is displaying higher than the rest when I assign an id or class to the div element?
https://i.sstatic.net/9SMdT.png
Take a look at the code snippet below:
<div id="pickList">
<ul *ngFor="let channel of currentPickSelection">
<li class="list-group-item" style="float:Left;margin:1px;" (dragover)="onDragOver(channel[0])" (drop)="onDrop()"
[ngStyle]="{'background-color': channel[0].compChannel[0].compChannelLogo.length !== 0 ? '#8EC0D1' : 'aliceblue' }">
<ng-container *ngIf="channel[0].compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel[0].logo }}" alt="{{ channel[0].channel }}" width="50" height="50">
<img class="img-rounded" src="{{ channel[0].compChannel[0].compChannelLogo }}" alt="{{ channel[0].compChannel[0].compChannelName }}"
width="50" height="50">
</ng-container>
<br>
<div align="center">
<strong>
<font size="2">{{ channel[0].pickCode }}</font>
</strong>
</div>
</li>
</ul>
</div>
And here's the CSS associated with the #pickList id:
#pickList {
height:565px;
scroll-behavior: auto;
overflow:auto;
}