Hey guys.
I am trying to do a code key where the each key pair sits in a column then will wrap depending on the device width. I don’t want the individual letters inside the columns to wrap so there is a text-wrap ->text-nowrap going on. I am seeing that on ionic serve, it displays fine but on device, the wrap does not wrap accordingly and some letters are missing because they are off the screen.
<h1>Code Key</h1>
<ion-grid>
<ion-row text-wrap>
<ion-col *ngFor="let letter of code.keys; let i = index" [attr.data-index]="i" text-nowrap>
<span *ngIf="i%2 || difficulty != 'hard' "><strong>{{letter}}:</strong>{{code.map[letter]}}</span>
</ion-col>
</ion-row>
</ion-grid>
Here is on ionic serve
Here is the image of what it looks like on mobile.
I thought it would work like bootstrap where it would automatically move to a new line but I understand it may not. If you think there is a better way to display a code key, I am all ears.