Ion-toggle inside ion-item looks bad


#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…


#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>

#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?


#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.


#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.