Ion-toggle inside ion-item looks bad

Ionic Framework ionic-v3
1

I’ve got a list with ion-toggle components inside each ion-item. When scrolling down to list items previously not in view, the toggles are visible, but they don’t look quite right…

image
toggle.gif316×565 1.24 MB

2

Hi! Could you share some markup for this? How creating these items?

3

Sure, hope this helps:

<ion-content class="has-header">

	<ion-list>
		<a ion-item detail-none *ngFor="#zone of (zones | async)" (click)="showZoneDetails(zone)">
			<ion-thumbnail item-left>
				<img [src]="thumbnail(zone)">
			</ion-thumbnail>
			<ion-label>
				<h2>{{zone.name}}</h2>
				<p>{{zone.description}}</p>
			</ion-label>

			<ion-toggle item-right checked="{{zone.active}}" (click)="noop($event)" (change)="handleSetZoneActive($event, zone)"></ion-toggle>
		</a>
	</ion-list>

</ion-content>
1 Like
4

Hi jason, why did you put the ion-item inside an <a> tag?

5

Hmm, not seeing the flashes, like in your gif.
What’s beta version are you using?

image
Screen Shot 2016-03-15 at 10.34.59 AM.png409×694 8.4 KB

6

I put it inside an <a> tag, so that the item can be tapped to go to a new page without delay.

7

Did you try it with enough items in the list that it needs to be scrolled? I’m noticing it especially when scrolling down to items rendered off screen initially.

I’m using ionic beta.3

8

Also, I just noticed the live demo of toggle suffers from the same problem: http://ionicframework.com/docs/v2/components/#toggle

I’m using chrome for testing, if that makes a difference.

image
toggle2.gif379×767 449 KB

9

I just checked the demo version in Chrome and I’m not seeing the same issues. The bottom toggle is fully defined when it comes into view for me.

10

This might be a browser-related issue. Here is a demo environment and I can reproduce the problem on Chrome (current stable, 49.0.2623.87 m, 64-bit), however not when scrolling with the mouse wheel but only when dragging the scrollbar with the mouse. On the other side I cannot reproduce the problem at all on Firefox.