Hi,
I have a kendo mobile view with lot of content.One has to scroll to go to the bottom of the view.I have a div(locatemap) with google maps.For some reason, whenever I pan up or down or zoom in the map by touching and moving on the device, it causes the entire ​view to scroll up or down. I have used data-stretch="true" still it is not working.
Below is the code:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="view" id="locatemyzyptagview" data-layout="mobile-tabstrip" data-align="center" data-reload="true"
data-model="APP.models.locatemyzyptag" data-init="locateExistingTag_init" data-show="locateExistingTag_show" data-stretch="true">
<div id="locateTagScroller" data-role="scroller" style="width: 100%;">
<div data-role="content" id="MainContentDiv">
<div class="tag-details-fav">
<img id="heartid" class="img-top" src="styles/images/favsmallheart.png" />
</div>
<div id="myzyptahtxtbox" class="tag-details font-size-22">
</div>
<div id="desctxtarea" class="tag-description font-size-14">
</div>
<div id="locatemap" class="tag-map">
</div>
<div id="locatemapicons" class="tag-map-icons">
<a id="editicon" class="edit_icon" data-role="button" data-click="editiconfunc">
<img src="styles/images/editiconred.png" /></a><br />
<a id="directionicon" data-role="button" data-click="ShowDirections">
<img src="styles/images/getdiricon.png" /></a><br />
<a id="favicon" class="fav_icon" data-role="button" data-click="addtofav">
<img src="styles/images/addfavicon.png" /></a>
</div>
<div id="tagIcons" class="tag-icons">
<center>
<a data-role="button" data-click="ShareViaFb">
<img src="styles/images/socialmedia/facebook.png" /></a> <a data-role="button" data-click="ShareViaGmail">
<img src="styles/images/socialmedia/google.png" /></a> <a data-role="button" data-click="ShareViaTwitter">
<img src="styles/images/socialmedia/twitter.png" /></a> <a data-role="button" data-click="ShareViaWhatsapp">
<img src="styles/images/socialmedia/whatsapp.png" /></a> <a data-role="button" data-click="ShareViaSms">
<img src="styles/images/socialmedia/sms.png" /></a> <a data-role="button" data-click="ShareViaEmail">
<img src="styles/images/socialmedia/mail.png" /></a> <a data-role="button" data-click="Copylink">
<img src="styles/images/socialmedia/link.png" /></a>
</center>
</div>
<div id="tagPhotoLabel" class="tag-label" style="display:none;">
PHOTO
</div>
<div>
<center>
<img src="" id="myImgSearchExisting" class="resimgs" style="display:none;padding-top:6px;" data-role="touch" data-doubletap="myTouch.doubletap"/>
</center>
</div>
<div id="tagAddressLabel" class="tag-label">
ADDRESS
</div>
<div id="addresstxtarea" class="tag-add">
</div>
<div id="tagNotesLabel" class="tag-label">
NOTES
</div>
<div id="notestxtarea" class="tag-notes">
</div>
</div>
</div>
</body>
</html>
How can I solve this issue?
Thanks,
Ruchin Dayal.
2 Answers, 1 is accepted
I see you defined a Scroller in your view that seems to contain the entire view contents. This is not recommended practice, as the view has an implicit scroller of its own (when native scrolling is disabled) and the two scrollers may conflict each other.
If the problem persists after you remove the scroller, you can try turning on native scrolling for the view in question by setting data-use-native-scrolling="true" in the View definition.
Also, ensure that you are using the latest version of Kendo UI in your project by checking the current version in the Package Manager.
Regards,
Tsvetina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Rank 1
Hi Tsvetina,
Thank you for the reply.I did manage to fix the issue by doing the following things:-
1)I removed the scroller (locateTagScroller) and also removed the data-stretch="true" from the view.
2)On data show event I added the following kendo touch event to the map div:-
$('#locatemap').kendoTouch({
tap: handleTouchEvent,
doubletap: handleTouchEvent,
hold: handleTouchEvent,
touchstart: handleTouchEvent,
touchend: handleTouchEvent,
dragstart: handleTouchEvent,
dragend: handleTouchEvent
});
$('#heartimgg,#myzyptahtxtbox,#desctxtarea,#tagIcons,#tagPhotoLabel,#myImgSearchExisting,#tagAddressLabel,#addresstxtarea,#tagNotesLabel,#notestxtarea').kendoTouch({
tap: handleTouchEvent1,
doubletap: handleTouchEvent1,
hold: handleTouchEvent1,
touchstart: handleTouchEvent1,
touchend: handleTouchEvent1,
dragstart: handleTouchEvent1,
dragend: handleTouchEvent1
});
3)function handleTouchEvent() {
debugger;
kendo.mobile.application.scroller().disable();
}
function handleTouchEvent1() {
debugger;
kendo.mobile.application.scroller().enable();
}
The above steps solved the problem for me.
Regards,
Ruchin Dayal.