Use of a ToggleSwitch inside a Scroller

Question

The ToggleSwitch introduced in 4.6 looks like a great component that really gives a mobile feel to what would otherwise be a simple checkbox. While I am somewhat dissapointed that a new skin is required to set the selected and unselected labels, I can get through that.

The issue I am having is with the use of a ToggleSwitch inside a Scroller. If you place a ToggleSwitch inside a Scroller and fill the rest of the scroller with enough content, then the vertical scrolling action of the Scroller will interfere with the ToggleSwitch's horizontal scrolling. While using the ToggleSwitch to move from left to right, if the user barely moves up or down, then the Scroller will scroll. This will break the interaction with the ToggleSwitch. Usually this will snap the ToggleSwitch to the closest position, left or right. However, many times the ToggleSwitch's thumb is within the middle 2/3 of the ToggleSwitch. In this case, the thumb will hang in the middle of the switch!

This can be very confusing for a user, as their selection will not be completed. While it may appear that the ToggleSwitch has no selection, or is even (just almost) in the selected/unselected state... it could very well be in the opposite state.

Has anyone found any kind of workaround to this issue?

ChristopherTotty · Accepted Answer

Thanks for the reply. I think my explanation might have been a little off. It sounds like your solution would be for scrolling into a ToggleSwitch, not out of the ToggleSwitch. Still, it got me thinking of another method that looks to work.

I turn off the scroller's vertical scrolling while the switch is in use, and then turn it back on when the switch is finished. I also force a reset of the switch's selection if the user mouses out of the switch. This keeps it from getting visually hung between selected/unselected.

protected function toggleSwitch_MouseDown(event:MouseEvent):void

{

scrollerContent.setStyle('verticalScrollPolicy', ScrollPolicy.OFF);

}

protected function toggleSwitch_MouseOut(event:MouseEvent):void

{

scrollerContent.setStyle('verticalScrollPolicy', ScrollPolicy.ON);

toggleSwitch.selected = toggleSwitch.selected;

}

protected function scrollerContent_MouseUp(event:MouseEvent):void

{

scrollerContent.setStyle('verticalScrollPolicy', ScrollPolicy.ON);

}

ChristopherTotty · Answer

Anyone have an idea?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.