在 Telerik AppBuilder Icenium Hybrid Cordova 中打开(然后关闭)数字键盘后,无法在长格式 Android 上滚动到顶部
Can't scroll to top on Android on long form after number-pad is opened (and then closed) in Telerik AppBuilder Icenium Hybrid Cordova
我正在构建一个 Telerik AppBuilder Icenium Hybrid Cordova 应用程序,并且我有一个包含一些内容的视图(HTML 页面 div)。视图比设备长,所以我必须向下滚动 "below the fold" 才能完成表格。但是,我注意到,如果在表单上,我有一个类型为 "number" 的输入(这会打开数字键盘),然后我输入一个数字,然后关闭数字键盘,然后尝试滚动到顶,我不行了
这是标记:(这个标记没什么特别的,但这是实际的标记,假设我滚动到底部并从下往上完成表单,然后填充日期(在最底部)然后我向上移动然后填充 "times per WI" - 例如 - 然后我尝试滚动到顶部,但我不能;但是我可以滚动到视图的最低点以下,数量等于实际数字键盘本身的大小。(就像,一旦我切换数字键盘,它就会操纵屏幕可滚动的最大高度或其他东西。
<style>
.bodyPartImg img {
width: 50px;
height: 50px;
}
</style>
<div data-role="view"
data-title="Workout Type Rules"
data-layout="main"
data-model="app.workoutTypeRule"
data-show="app.workoutTypeRule.onShow"
data-after-show="app.workoutTypeRule.afterShow">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2 style="font-weight: bolder;">Choose Workout Type</h2>
</div>
<div class="col-sm-8">
<select class="form-control sel_workoutTypes"></select>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">Should this activity focus on <u>multiple body parts</u>?</h2>
</div>
<div class="col-xs-4">
<input type="checkbox" name="multipleBodyParts" checked>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-4">
<!-- Should this activity focus on multiple body parts -->
<h2 style="font-weight: bolder;">Choose Bodypart(s)</h2>
</div>
<div class="col-sm-8">
<a id="bodyPartImg_abs" class="bodyPartImg"><img src="images/abs.png" /></a>
<a id="bodyPartImg_arms" class="bodyPartImg"><img src="images/arm.png" /></a>
<a id="bodyPartImg_back" class="bodyPartImg"><img src="images/back.png" /></a>
<a id="bodyPartImg_chest" class="bodyPartImg"><img src="images/chest.png" /></a>
<a id="bodyPartImg_legs" class="bodyPartImg"><img src="images/leg.png" /></a>
<a id="bodyPartImg_shoulders" class="bodyPartImg"><img src="images/shoulder.png" /></a>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Sets
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_sets" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Reps
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_reps" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Weight
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_weight" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Bodypart Impact
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_bodyPartImpact" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Duration
</h2>
</div>
<div class="col-xs-4">
<input type="range" class="form-control" name="min_bodyPartImpact" min="0" max="10" />
<input type="range" class="form-control" name="min_bodyPartImpact" min="0" max="60" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">See details?</h2>
</div>
<div class="col-xs-4">
<input type="checkbox" name="seeDetails" checked>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Times Per Workout Interval (WI)?
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="timePerWI" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-6">
<h2 style="font-weight: bolder;">
Start Date
</h2>
</div>
<div class="col-xs-6">
<input type="date" class="form-control" name="startDate" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-6">
<h2 style="font-weight: bolder;">
End Date
</h2>
</div>
<div class="col-xs-6">
<input type="date" class="form-control" name="endDate" />
</div>
</div>
</div>
</div>
答案是
data-use-native-scrolling="true">
见底部
<div data-role="view"
data-title="Workout Type Rules"
data-layout="main"
data-model="app.workoutTypeRule"
data-show="app.workoutTypeRule.onShow"
data-after-show="app.workoutTypeRule.afterShow"
data-use-native-scrolling="true">
我正在构建一个 Telerik AppBuilder Icenium Hybrid Cordova 应用程序,并且我有一个包含一些内容的视图(HTML 页面 div)。视图比设备长,所以我必须向下滚动 "below the fold" 才能完成表格。但是,我注意到,如果在表单上,我有一个类型为 "number" 的输入(这会打开数字键盘),然后我输入一个数字,然后关闭数字键盘,然后尝试滚动到顶,我不行了
这是标记:(这个标记没什么特别的,但这是实际的标记,假设我滚动到底部并从下往上完成表单,然后填充日期(在最底部)然后我向上移动然后填充 "times per WI" - 例如 - 然后我尝试滚动到顶部,但我不能;但是我可以滚动到视图的最低点以下,数量等于实际数字键盘本身的大小。(就像,一旦我切换数字键盘,它就会操纵屏幕可滚动的最大高度或其他东西。
<style>
.bodyPartImg img {
width: 50px;
height: 50px;
}
</style>
<div data-role="view"
data-title="Workout Type Rules"
data-layout="main"
data-model="app.workoutTypeRule"
data-show="app.workoutTypeRule.onShow"
data-after-show="app.workoutTypeRule.afterShow">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2 style="font-weight: bolder;">Choose Workout Type</h2>
</div>
<div class="col-sm-8">
<select class="form-control sel_workoutTypes"></select>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">Should this activity focus on <u>multiple body parts</u>?</h2>
</div>
<div class="col-xs-4">
<input type="checkbox" name="multipleBodyParts" checked>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-4">
<!-- Should this activity focus on multiple body parts -->
<h2 style="font-weight: bolder;">Choose Bodypart(s)</h2>
</div>
<div class="col-sm-8">
<a id="bodyPartImg_abs" class="bodyPartImg"><img src="images/abs.png" /></a>
<a id="bodyPartImg_arms" class="bodyPartImg"><img src="images/arm.png" /></a>
<a id="bodyPartImg_back" class="bodyPartImg"><img src="images/back.png" /></a>
<a id="bodyPartImg_chest" class="bodyPartImg"><img src="images/chest.png" /></a>
<a id="bodyPartImg_legs" class="bodyPartImg"><img src="images/leg.png" /></a>
<a id="bodyPartImg_shoulders" class="bodyPartImg"><img src="images/shoulder.png" /></a>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Sets
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_sets" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Reps
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_reps" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Weight
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_weight" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Bodypart Impact
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="min_bodyPartImpact" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Minimum Duration
</h2>
</div>
<div class="col-xs-4">
<input type="range" class="form-control" name="min_bodyPartImpact" min="0" max="10" />
<input type="range" class="form-control" name="min_bodyPartImpact" min="0" max="60" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">See details?</h2>
</div>
<div class="col-xs-4">
<input type="checkbox" name="seeDetails" checked>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-8">
<h2 style="font-weight: bolder;">
Times Per Workout Interval (WI)?
</h2>
</div>
<div class="col-xs-4">
<input type="number" class="form-control" name="timePerWI" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-6">
<h2 style="font-weight: bolder;">
Start Date
</h2>
</div>
<div class="col-xs-6">
<input type="date" class="form-control" name="startDate" />
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-6">
<h2 style="font-weight: bolder;">
End Date
</h2>
</div>
<div class="col-xs-6">
<input type="date" class="form-control" name="endDate" />
</div>
</div>
</div>
</div>
答案是
data-use-native-scrolling="true">
见底部
<div data-role="view"
data-title="Workout Type Rules"
data-layout="main"
data-model="app.workoutTypeRule"
data-show="app.workoutTypeRule.onShow"
data-after-show="app.workoutTypeRule.afterShow"
data-use-native-scrolling="true">