Pinch zoom on maps causes view to scroll up or down

3 posts, 0 answers
  1. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 16 Oct 2015 Link to this post

    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>
        <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 id="myzyptahtxtbox" class="tag-details font-size-22">
            <div id="desctxtarea" class="tag-description font-size-14">

            <div id="locatemap" class="tag-map">

            <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 id="tagIcons" class="tag-icons">
                    <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>

            <div id="tagPhotoLabel" class="tag-label" style="display:none;">
              <img src="" id="myImgSearchExisting"   class="resimgs" style="display:none;padding-top:6px;" data-role="touch" data-doubletap="myTouch.doubletap"/>
            <div id="tagAddressLabel" class="tag-label">
            <div id="addresstxtarea" class="tag-add">
            <div id="tagNotesLabel" class="tag-label">
            <div id="notestxtarea" class="tag-notes">


    How can I solve this issue?
    Ruchin Dayal.

  2. Tsvetina
    Tsvetina avatar
    1862 posts

    Posted 21 Oct 2015 Link to this post

    Hello Ruchin,

    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.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

  3. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 22 Oct 2015 in reply to Tsvetina Link to this post

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


                        tap: handleTouchEvent,
                        doubletap: handleTouchEvent,
                        hold: handleTouchEvent,
                        touchstart: handleTouchEvent,
                        touchend: handleTouchEvent,
                        dragstart: handleTouchEvent,
                        dragend: handleTouchEvent


                        tap: handleTouchEvent1,
                        doubletap: handleTouchEvent1,
                        hold: handleTouchEvent1,
                        touchstart: handleTouchEvent1,
                        touchend: handleTouchEvent1,
                        dragstart: handleTouchEvent1,
                        dragend: handleTouchEvent1

    3)function handleTouchEvent() {
    function handleTouchEvent1() {

    The above steps solved the problem for me.


    Ruchin Dayal.

Back to Top