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

[Solved] Scroller repositioning problem after keyboard dismissed in AppBuilder

7 Answers 172 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.

7 Answers, 1 is accepted

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>

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

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.

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>

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>

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.