Telerik Forums / AppBuilder Forum / General Discussion /

Scroller repositioning problem after keyboard dismissed in AppBuilder

Telerik Platform AppBuilder
Resources Buy Try

Thread is closed for posting

8 posts, 0 answers

perico

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
Tsvetina
Admin

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.
perico

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>
Tsvetina
Admin

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.
perico

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

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

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.
Tsvetina
Admin

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.

Scroller repositioning problem after keyboard dismissed in AppBuilder

perico

Tsvetina

perico

Tsvetina

perico

perico

perico

Tsvetina