Here is the code snippet:
<div class="row shochatgroup">
<div *ngFor="let message of messages" class="col-auto">
<button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.attributes.shochatpaid < 5" class="paidshowchat1-4 btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
<button *ngIf="message.state.attributes.shochatpaid > 4 && message.state.attributes.shochatpaid < 9" class="paidshochat5-9 btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
<button *ngIf="message.state.attributes.shochatpaid > 8 && message.state.attributes.shochatpaid < 20" class="paidshochat10-19 btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
<button *ngIf="message.state.attributes.shochatpaid > 19 && message.state.attributes.shochatpaid < 50" class="paidshochat20-49 btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
<button *ngIf="message.state.attributes.shochatpaid > 49 && message.state.attributes.shochatpaid < 99" class="paidshochat50-99 btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
<button *ngIf="message.state.attributes.shochatpaid > 99" class="paidshochat100plus btn" [ngbTooltip]="message.state.body" triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
</div>
</div>
And here is the corresponding CSS:
.shochatgroup{
overflow-x: auto;
white-space: nowrap;
}
However, this is the unexpected resulthttps://i.sstatic.net/SsNV6.png
I came across this discussion on Stack Overflow, but I'm still trying to grasp the difference between my code and theirs: Horizontal scrollable div's in a bootstrap row