I have scrollable content in each slide, list of items to be precise.
The problem is that it all works but white trying to scroll on a slide most of the times attempting to scroll actually causes the slide to move instead of scroll. I have to make sure I slide the finger very vertical to scroll.
This is causing a very poor experience. Is there a way I can reduce the angle of swipe sensitivity for slide box so that scroll work with less then perfect 90 degree angle
Hmm can you put together an example of what you have? I’ve used lists with slide-box and it’s scrolled fine.
I am actually having this and other related problems as well. @vazad What OS/Platform are you using? I specifically have had these sensitivity issues with Android 4.4.4.
Everything worked perfectly, great user experience until I updated my Galaxy S5 from 4.4.2 to 4.4.4 this morning. Now the UX is an absolute nightmare. Scrollable content inside a slidebox is very difficult to work with (side to side swiping sensitivity is super super high), and tap-hold gestures are really really difficult to engage (again due to the side to side swipe sensitivity).
I have noticed this on my wife’s Nexus 5 as well (which has always been running 4.4.4).
I am going to need to find a solution to this ASAP, since my Galaxy S5 is my primary demo device and it is a total train-wreck to work with now.
Marc
Note that this is only a problem inside a Slide Box, tap-hold and scroll works fine otherwise.
A little extra detail – you can see the very high sensitivity just by touching a slide. No matter how directly you try to touch the screen (without swiping), most of the time you see the swipe engage, the slide budges a bit, and suddenly you’re in swipe mode, unable to register a tap-hold or scroll up and down.
Also note that I am still on beta10, or perhaps a nightly frozen sometime after beta10. I will try upgrading to latest beta and report back tonight.
Marc
I recently updated to beta13, this issue is still a MAJOR problem for me. As in, a complete app UX fail, an embarrassment to have out in the wild.
I’m surprised more people are not complaining about this. Perhaps there is something specific about my setup? Attached is an HTML template where this is happening to me:
<ion-view title="LOVE.">
<ion-nav-buttons side="left">
<button ng-if="activeSearchSlide == 2" class="button no-animation button-icon icon ion-ios7-arrow-back" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" ng-click="clearSearch()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button no-animation button-icon icon ion-ios7-gear" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left;" on-tap="gotoSettings()" on-hold="holdMe()">
</button>
<button class="button no-animation button-icon icon ion-ios7-paperplane" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" on-tap="sendFeedback()" on-hold="holdMe()">
</button>
</ion-nav-buttons>
<ion-content has-header="true" >
<ion-slide-box does-continue="false" auto-play="false" active-slide="activeSearchSlide" on-slide-changed="slideChanged(index)">
<ion-slide>
<div>
<label class="tagLabel" on-tap="clickTag()" on-hold="tagMenu($index, tag)" ng-repeat="tag in templates.categories track by $index" style="{{tag.checked | myTagStyle}}">
<p>{{tag.name}}<span ng-show="!tag.active">*</span><span class="searchCount">{{tag.bundleCount}}</span></p>
</label>
<form ng-submit="addTag(newTagText)">
<div>
<div style="border-left: none; border-top: none; border-bottom: none; border-right: 40px solid #f8f8f8">
<input type="text" id="inputText" ng-model="newTagText" placeholder="new tag category...">
</div>
</div>
</form>
</div>
<br/>
<br/>
<br/>
<br/>
</ion-slide>
<ion-slide>
<div ng-if="!somethingSelected" >
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p style="font-size:45pt;color:#DDD;">
???
</p>
</div>
<div>
<div ng-repeat="tag in templates.categories track by $index" ng-show="tag.checked" class="check-element animate-show" >
<label class="tagLabel" on-tap="clickTag()" on-hold="tagMenu($index, tag)" style="{{tag.checked | myTagStyle}}">
<p>{{tag.name}}<span ng-show="!tag.active">*</span><span class="searchCount">{{tag.bundleCount}}</span></p>
</label>
<label class="tagLabel" on-tap="clickSubTag($parent)" on-hold="subTagMenu($index, item)" ng-repeat="item in tag.items track by $index" style="{{item.checked | myTagletStyle}}" >
<p><span style='display:inline-block;'> </span>{{item.name}}<span ng-show="!item.active">*</span><span class="searchCount">{{item.bundleCount}}</span></p>
</label>
<form ng-submit="addSubTag()">
<div>
<div>
<input type="text" class="subtagTextInput" id="inputText" placeholder="new {{tag.name}} taglet..." ng-model="inputText">
</div>
</div>
</form>
<br/>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</ion-slide>
<ion-slide style="padding-left: 3px; padding-right: 3px;">
<h1>{{searchString}}</h1>
<div ng-repeat="bundle in searchResults track by $index | orderBy:attributes.timestamp:reverse">
<div on-tap="viewBundle($index)" on-hold="openBundleModal($index, bundle)" style="background-image: url('{{bundle.firstThumb}}');" class="item {{bundle.attributes.tagged | paintUntagged}}">
<div class="bundleCount"><p>{{bundle.URLcount}}</p></div>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
<div>
<button ng-if="locked && overLimit && onSearchPage" class="button button-energized inAppPurchase" ng-click="unlockApp()">{{searchLimit}}/{{totalBundles}}</button>
</div>
I put a scrollable content in slideBox too,it works well on android original webview.But when I build it as a crosswalk android project,it is terrible. The slideBox is too sensitive,which makes the content hard to be scrolled.So I must give up the slideBox or make the content be unscrollable.So bad.
Slide-box has been reworked in the nightly builds, so give that a try.
There are still some issues that need to be ironed out, but it is much better.
I tried nightly (build 667), and it is not possible to scroll up or down when the slideBox is within a tab.
(This works on the 1.0.0-beta.13 version)
However, the sensibility feels better now. When tabs are within a slideBox, it’s great.
(Tested on Nexus 5, android 4.4.4)
Is There any new update about it?
i also have slide box with verticle scroll and in phone(nexus 5) it very sensitivity.
really poor UX.
btw if i put two finger and swipe down it work well, but still i want that user will use it with one finger and not two.
Thanks
Any solution to the sensitivity?
I have problem with this too. I have gone as far as editing ionic.js…
tweaking the number offset, dragthresholdY, all with no effect. Please help
Hi,
I have exactly the same problem. It works fine on iOs but Android slides before scrolling.
Any solution found?
Thanks in advance
David
Hi,
I’m also having this problem. Is there any fix or workaround?
Thank you
Hi all, I’m having the same problem. Is there any solution?
I think it’s a ionic bug. At the line 8392 of the ionic bundle it’s set the variable isScrolling
if ( typeof isScrolling == 'undefined') {
isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
}
but when I debug my application, delta.x==0 and delta.y==0 most of the time so isScrolling==false also. Just add a = to the comparison.