Telerik Forums
This is a migrated thread and some comments may be shown as answers.

Scroller repositioning problem after keyboard dismissed in AppBuilder

7 Answers 68 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
perico
Top achievements
Rank 1
Iron
perico asked on 30 Jun 2017, 10:04 AM

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

7 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 04 Jul 2017, 06:43 AM
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.

 
0
perico
Top achievements
Rank 1
Iron
answered on 04 Jul 2017, 02:29 PM

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>
0
Tsvetina
Telerik team
answered on 07 Jul 2017, 11:01 AM
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.

 
0
perico
Top achievements
Rank 1
Iron
answered on 17 Jul 2017, 03:33 PM

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>
0
perico
Top achievements
Rank 1
Iron
answered on 18 Jul 2017, 10:31 AM
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>
0
perico
Top achievements
Rank 1
Iron
answered on 19 Jul 2017, 03:40 PM

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.

0
Tsvetina
Telerik team
answered on 20 Jul 2017, 11:34 AM
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.

 
Tags
General Discussion
Asked by
perico
Top achievements
Rank 1
Iron
Answers by
Tsvetina
Telerik team
perico
Top achievements
Rank 1
Iron
Share this question
or