Text-wrap on browser vs ios device

@austingrove wrote:

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

Screen Shot 2017-12-28 at 9.41.24 AM.png574x1010 25.1 KB

Here is the image of what it looks like on mobile.

Screen Shot 2017-12-28 at 9.36.07 AM.png612x546 9.05 KB

Posts: 1

Participants: 1

Read full topic