Scroller repositioning problem after keyboard dismissed in AppBuilder

Thread is closed for posting
8 posts, 0 answers
  1. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 30 Jun 2017 Link to this post

    Hi ,

    I've created an mobile application from drawer sample application.

    In one of my views, i have a listview wich exceeds the screen.

    http://www.telerik.com/forums/scroller-repositioning-problem-after-keyboard-dismissed-in-appbuilder

    As you can see in the the above link, there is a known issue with scroll view when keyboard is dismissed and the way to fix it is to enabled the native scroll.

    However native scroll can't be used with drawer, so what can i do to fix that ?

     

    Thank you

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 04 Jul 2017 Link to this post

    Hello Pierre,

    You can use the Drawer with native scrolling enabled. Additionally, it is possible to apply native scrolling to a single view, where you need it, and not to the entire app. Try setting data-use-native-scrolling="true" in the View containing inputs and see if the problem with the keyboard remains. If so, please show us your full View definition.

    Regards,
    Tsvetina
    Progress Telerik
     

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

     
  3. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 04 Jul 2017 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    http://docs.telerik.com/kendo-ui/controls/hybrid/native-scrolling

    I can see

    "The hybrid Kendo UI Drawer widget does not support content scrolling."

     

    So this is my code :

    <div data-role="view" id="tabstrip-infos" data-title="Informations" data-layout="mobile-tabstrip" data-model="app.infos" data-init="app.infos.dataInit" data-show="app.infos.dataShow" data-use-native-scrolling="true">
     
    ...
     
    </div>
     
    <div data-role="view" id="tabstrip-materiel" data-title="Materiel" data-layout="mobile-tabstrip" data-model="app.materiel">
     
    ...
     
    </div>
     
    <div data-role="view" id="tabstrip-temps" data-title="Temps passé" data-layout="mobile-tabstrip" data-model="app.temps" data-show="app.temps.onShow">
     
    ...
     
    </div>

     

    Scrolling works on second view but not on the first. (Both are contained in tabstrip wich is in html page contained into the drawer)

    <div data-role="layout" data-id="mobile-tabstrip" data-show="showDemoLayout">
        <div data-role="footer">
            <div data-role="tabstrip" data-selected-index="0">
                <a href="#tabstrip-infos" data-icon="info">Infos</a>
                <a href="#tabstrip-materiel" data-icon="cart" data-badge="0">Materiel</a>
            </div>
        </div>
    </div>

     

    <body id="kendoUiMobileApp">
     
        <div id="appDrawer" data-role="drawer" data-title="Menu"  data-model="app.drawerModel" data-swipe-to-open-views="['listeBT','tabstrip-infos','tabstrip-materiel','tabstrip-temps','tabstrip-finaliser','finalBT']">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
            <ul id="navigation-container" data-role="listview">
                <li><a href="components/btEncours/listeBT.html" data-icon="organize">Bons en cours</a></li>
                <li><a href="components/btTermines/finalBT.html" data-icon="mostviewed">Bons terminés</a></li>
                <li><a data-bind="click: logOut" data-icon="action">Se déconnecter</a> </li>
            </ul>
        </div>
     
    </body>
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 07 Jul 2017 Link to this post

    Hi Pierre,

    This limitation means that the Drawer will not scroll if native scrolling is enabled. I did test a Drawer app with native scrolling enabled and noticed some glitches only when the setting is enabled globally for the Application. When I apply it to specific views, the Drawer is scrollable and behaves as expected.

    However, if I understand correctly, scrolling back to top does not work even after applying data-use-native-scrolling="true" for your View. Is this so? If this is the case, could you share with us your View content—you could replace sensitive information with hard-coded strings. Also, can you specify what device and OS you are testing this on? 

    Regards,
    Tsvetina
    Progress Telerik
     

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

     
  5. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 17 Jul 2017 in reply to Tsvetina Link to this post

    Hello,

    thank you for this clarification.

    When i enable scrolling to a specific view, i can't even scroll on this view.

     

    Here my full code (i'm testing the app on android 7 and VS 2017 extension Simulator).

     

    001.<div data-role="view" id="tabstrip-infos" data-title="Informations" data-layout="mobile-tabstrip" data-model="app.infos" data-init="app.infos.dataInit" data-show="app.infos.dataShow" data-use-native-scrolling="true">
    002.        <ul data-role="listview" data-type="group">
    003.            <li>
    004.                Date intervention
    005.                <ul data-role="listview" data-style="inset">
    006.                    <li>
    007.                        <input id="input_date_inter" type="date" data-bind="value: bd_date_inter" disabled />
    008.                    </li>
    009.                </ul>
    010.            </li>
    011.            <li>
    012.                Informations maintenance
    013.                <ul data-role="listview" data-style="inset">
    014.                    <li>
    015.                        <label class="km-label-above">
    016.                            Type:
    017.                            <select data-bind="value: bd_type" disabled>
    018.                                <option value="0">Préventive</option>
    019.                                <option value="1">Corrective</option>
    020.                            </select>
    021.                        </label>
    022.                    </li>
    023.                    <li>
    024.                        <label class="km-label-above">
    025.                            Code site:
    026.                            <input id="input_reference" type="text" value="Text" data-bind="value: bd_reference" disabled />
    027.                        </label>
    028.                    </li>
    029.                    <li>
    030.                        <label class="km-label-above">
    031.                            Nom de la personne qui réceptionne le site:
    032.                            <input id="input_nom_recept" type="text" value="Text" data-bind="value: bd_nomRecept" />
    033.                        </label>
    034.                    </li>
    035.                </ul>
    036.            </li>
    037.            <li>
    038.                Travail effectué
    039.                <ul>
    040.                    <li>
    041.                        <textarea id="input_effectue" data-bind="value: bd_effectue" style="resize: none"></textarea>
    042.                    </li>
    043.                </ul>
    044.            </li>
    045.            <li>
    046.                Travail restant
    047.                <ul>
    048.                    <li>
    049.                        <textarea id="input_restant" data-bind="value: bd_restant" style="resize: none"></textarea>
    050.                    </li>
    051.                </ul>
    052.            </li>
    053.            <li>
    054.                Observations
    055.                <ul>
    056.                    <li>
    057.                        <textarea id="input_observations" data-bind="value: bd_observations" style="resize: none"></textarea>
    058.                    </li>
    059.                </ul>
    060.            </li>
    061. 
    062.        </ul>
    063.</div>
    064. 
    065.<div data-role="view" id="tabstrip-materiel" data-title="Materiel" data-layout="mobile-tabstrip" data-model="app.materiel">
    066. 
    067.    <table style="width:100%">
    068.        <tr>
    069.            <td style="vertical-align:top;">
    070.                <div data-role="scroller" style="height: calc(100vh - 50px);">
    071.                    <ul id="lvMaterielStock" data-role="listview" data-bind="source: srcStock , events { click: onClickStock }" data-template="StockTemplate" data-filterable="{ field: 'code_article', placeholder: 'Rechercher...', operator: 'contains', ignoreCase: true }"></ul>
    072.                </div>
    073.            </td>
    074.            <td style="vertical-align:top;">
    075.                <div data-role="scroller" style="height: calc(100vh - 50px);">
    076.                    <ul id="lvMaterielUsed" data-role="listview" data-bind="source: srcUsed , events { click: onClickUsed }" data-template="UsedTemplate" data-filterable="{ field: 'code_article', placeholder: 'Rechercher...', operator: 'contains', ignoreCase: true }"></ul>
    077.                </div>
    078.            </td>
    079.        </tr>
    080.    </table>
    081. 
    082.</div>
    083. 
    084. 
    085.<div data-role="view" id="tabstrip-temps" data-title="Temps passé" data-layout="mobile-tabstrip" data-model="app.temps" data-show="app.temps.onShow">
    086.    <table style="width:100%">
    087.        <tr>
    088.            <td style="vertical-align:top;width:120px;">
    089.                <ul id="lvJours" data-role="listview" data-bind="source: srcJours , events { click: onClickJOurs }" data-template="joursTemplate" ></ul>
    090.            </td>
    091.            <td style="vertical-align:top;">
    092.                <ul id="lvLundi" data-role="listview" data-style="inset">
    093.                    <li>
    094.                        <label class="km-label-above">
    095.                            Trajet
    096.                            <input id="input_lundi" data-bind="value: bd_trajet_lundi" type="text" style="width:70px;" />
    097.                        </label>
    098.                    </li>
    099.                    <li>
    100.                        <label class="km-label-above">
    101.                            Heure d'arrivée
    102.                            <input id="tp_lundi_a" data-bind="value: bd_arrivee_lundi" type="time" style="width:70px;" />
    103.                        </label>
    104.                    </li>
    105.                    <li>
    106.                        <label class="km-label-above">
    107.                            Heure départ
    108.                            <input id="tp_lundi_d" data-bind="value: bd_depart_lundi" type="time" style="width:70px;" />
    109.                        </label>
    110.                    </li>
    111.                </ul>
    112.                <ul id="lvMardi" data-role="listview" data-style="inset">
    113.                    <li>
    114.                        <label class="km-label-above">
    115.                            Trajet
    116.                            <input id="input_mardi" data-bind="value: bd_trajet_mardi" type="text" style="width:70px;" />
    117.                        </label>
    118.                    </li>
    119.                    <li>
    120.                        <label class="km-label-above">
    121.                            Heure d'arrivée
    122.                            <input id="tp_mardi_a" data-bind="value: bd_arrivee_mardi" type="time" style="width:70px;" />
    123.                        </label>
    124.                    </li>
    125.                    <li>
    126.                        <label class="km-label-above">
    127.                            Heure départ
    128.                            <input id="tp_mardi_d" data-bind="value: bd_depart_mardi" type="time" style="width:70px;" />
    129.                        </label>
    130.                    </li>
    131.                </ul>
    132.                <ul id="lvMercredi" data-role="listview" data-style="inset">
    133.                    <li>
    134.                        <label class="km-label-above">
    135.                            Trajet
    136.                            <input id="input_mercredi" data-bind="value: bd_trajet_mercredi" type="text" style="width:70px;" />
    137.                        </label>
    138.                    </li>
    139.                    <li>
    140.                        <label class="km-label-above">
    141.                            Heure d'arrivée
    142.                            <input id="tp_mercredi_a" data-bind="value: bd_arrivee_mercredi" type="time" style="width:70px;" />
    143.                        </label>
    144.                    </li>
    145.                    <li>
    146.                        <label class="km-label-above">
    147.                            Heure départ
    148.                            <input id="tp_mercredi_d" data-bind="value: bd_depart_mercredi" type="time" style="width:70px;" />
    149.                        </label>
    150.                    </li>
    151.                </ul>
    152.                <ul id="lvJeudi" data-role="listview" data-style="inset">
    153.                    <li>
    154.                        <label class="km-label-above">
    155.                            Trajet
    156.                            <input id="input_jeudi" data-bind="value: bd_trajet_jeudi" type="text" style="width:70px;" />
    157.                        </label>
    158.                    </li>
    159.                    <li>
    160.                        <label class="km-label-above">
    161.                            Heure d'arrivée
    162.                            <input id="tp_jeudi_a" data-bind="value: bd_arrivee_jeudi" type="time" style="width:70px;" />
    163.                        </label>
    164.                    </li>
    165.                    <li>
    166.                        <label class="km-label-above">
    167.                            Heure départ
    168.                            <input id="tp_jeudi_d" data-bind="value: bd_depart_jeudi" type="time" style="width:70px;" />
    169.                        </label>
    170.                    </li>
    171.                </ul>
    172.                <ul id="lvVendredi" data-role="listview" data-style="inset">
    173.                    <li>
    174.                        <label class="km-label-above">
    175.                            Trajet
    176.                            <input id="input_vendredi" data-bind="value: bd_trajet_vendredi" type="text" style="width:70px;" />
    177.                        </label>
    178.                    </li>
    179.                    <li>
    180.                        <label class="km-label-above">
    181.                            Heure d'arrivée
    182.                            <input id="tp_vendredi_a" data-bind="value: bd_arrivee_vendredi" type="time" style="width:70px;" />
    183.                        </label>
    184.                    </li>
    185.                    <li>
    186.                        <label class="km-label-above">
    187.                            Heure départ
    188.                            <input id="tp_vendredi_d" data-bind="value: bd_depart_vendredi" type="time" style="width:70px;" />
    189.                        </label>
    190.                    </li>
    191.                </ul>
    192.                <ul id="lvSamedi" data-role="listview" data-style="inset">
    193.                    <li>
    194.                        <label class="km-label-above">
    195.                            Trajet
    196.                            <input id="input_samedi" data-bind="value: bd_trajet_samedi" type="text" style="width:70px;" />
    197.                        </label>
    198.                    </li>
    199.                    <li>
    200.                        <label class="km-label-above">
    201.                            Heure d'arrivée
    202.                            <input id="tp_samedi_a" data-bind="value: bd_arrivee_samedi" type="time" style="width:70px;" />
    203.                        </label>
    204.                    </li>
    205.                    <li>
    206.                        <label class="km-label-above">
    207.                            Heure départ
    208.                            <input id="tp_samedi_d" data-bind="value: bd_depart_samedi" type="time" style="width:70px;" />
    209.                        </label>
    210.                    </li>
    211.                </ul>
    212.            </td>
    213.        </tr>
    214.    </table>
    215. 
    216.</div>
    217. 
    218. 
    219.<div data-role="view" id="tabstrip-finaliser" data-title="Finaliser" data-layout="mobile-tabstrip" data-model="app.finaliser">
    220. 
    221.    <a data-role="button" class="km-primary" data-bind="click: saveBT" style="display: block; margin: 2em; text-align: center;">Sauvegarder</a>
    222.    <a data-role="button" class="km-primary" data-bind="click: createPDF" style="display: block; margin: 2em; text-align: center;">PDF</a>
    223.    <table style="width:100%;">
    224.        <tr>
    225.            <th>Technicien</th>
    226.            <th>Client</th>
    227.        </tr>
    228.        <tr>
    229.            <td style="text-align:center;">
    230.                <img id="imgSignTech" data-bind="click: createSignTech" height="100" width="100" />
    231.            </td>
    232.            <td style="text-align:center;">
    233.                <img id="imgSignClient" data-bind="click: createSignClient" height="100" width="100" />
    234.            </td>
    235.        </tr>
    236.    </table>
    237. 
    238.</div>
    239. 
    240.<div data-role="layout" data-id="mobile-tabstrip" data-show="showDemoLayout">
    241.    <div data-role="footer">
    242.        <div data-role="tabstrip" data-selected-index="0">
    243.            <a href="#tabstrip-infos" data-icon="info">Infos</a>
    244.            <a href="#tabstrip-materiel" data-icon="cart" data-badge="0">Materiel</a>
    245.            <a href="#tabstrip-temps" data-icon="recents">Temps passé</a>
    246.            <a href="#tabstrip-finaliser" data-icon="play">Finaliser</a>
    247.        </div>
    248.    </div>
    249.</div>
    250. 
    251.<script type="text/x-kendo-template" id="StockTemplate">
    252.    <h3>#: code_article #</h3>
    253.    <p>#: type #</p>
    254.</script>
    255. 
    256.<script type="text/x-kendo-template" id="UsedTemplate">
    257.    <h3>#: code_article # (#: qty #)</h3>
    258.    <p>#: type #</p>
    259.</script>
    260. 
    261.<script type="text/x-kendo-template" id="joursTemplate">
    262.    #: jour #
    263.</script>
  6. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 18 Jul 2017 Link to this post

    01.<!DOCTYPE html>
    02.<html>
    03. 
    04.<head>
    05.    <title></title>
    06.    <meta charset="utf-8">
    07.    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
    08.    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
    09.    <link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
    10. 
    11. 
    12.    <link href="styles/overrides.css" rel="stylesheet">
    13.    <link href="styles/main.css" rel="stylesheet">
    14.    <link href="styles/perso.css" rel="stylesheet">
    15. 
    16.    <script src="cordova.js"></script>
    17.    <script src="kendo/js/jquery.min.js"></script>
    18.    <script src="kendo/js/kendo.all.min.js"></script>
    19.    <script src="app.js"></script>
    20. 
    21.    <script src="components/btTermines/index.js"></script>
    22.    <script src="components/btEncours/index.js"></script>
    23.    <script src="components/Authentication/index.js"></script>
    24. 
    25.</head>
    26. 
    27.<body id="kendoUiMobileApp">
    28. 
    29.    <div id="appDrawer" data-role="drawer" data-title="Menu"  data-model="app.drawerModel" data-swipe-to-open-views="['listeBT','tabstrip-infos','tabstrip-materiel','tabstrip-temps','tabstrip-finaliser','finalBT']">
    30.        <header data-role="header">
    31.            <div data-role="navbar">
    32.                <span data-role="view-title"></span>
    33.            </div>
    34.        </header>
    35.        <ul id="navigation-container" data-role="listview">
    36.            <li><a href="components/btEncours/listeBT.html" data-icon="organize">Bons en cours</a></li>
    37.            <li><a href="components/btTermines/finalBT.html" data-icon="mostviewed">Bons terminés</a></li>
    38.            <li><a data-bind="click: logOut" data-icon="action">Se déconnecter</a> </li>
    39.        </ul>
    40.    </div>
    41. 
    42.</body>
    43. 
    44.</html>
  7. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 19 Jul 2017 Link to this post

    My problem was i used kendo.all.min.js.

    With kendo.mobile.min.js it works but now i can't use kendo datepicker. I will use a normal one.

  8. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 20 Jul 2017 Link to this post

    Hi Pierre,

    Using kendo.all.min.js instead of kendo.mobile.min.js should not be causing such problems by itself if both libraries have the same version. Actually, kendo.all.min.js contains the scripts from kendo.mobile.min.js plus the web and DataViz widgets and features. It is possible that a JavaScript error or some functionality from the web widgets that you used was causing the issue with scrolling.

    Anyway, it is recommended to use the HTML form controls (numeric, date inputs, select element, etc.) instead of their Kendo UI Web counterparts in Cordova apps, as the HTML elements produce more native look for mobile devices with a smaller HTML output and no additional JavaScript.

    Regards,
    Tsvetina
    Progress Telerik
     

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

     
Back to Top