Kendo UI dropdownlist mobile scrolling

不打扰是莪最后的温柔 提交于 2020-01-25 18:08:18

问题


I am currently developing an application using Kendo UI. I use a dropdownlist like this

Kendo UI dropdownlist

On the browser it work's fine. I can open the list an scroll with the mousewheel, but when I try to use it on a device with touch (tablet or smartphone) i cannot scroll in the dropdownlist.

How can i add a listener or something else on the dropdownlist, that this makes it possible to scroll?


回答1:


From here:

Kendo Support Forum - Unable to scroll on iPad

To enable scrolling of the DropDownList ( popup in particular ) you need to include kendo.mobile.core.js, kendo.mobile.scroller.js. Check this jsFiddle demo, which shows how to enable scrolling in mobile device.

The css from the fiddle:

.km-touch-scrollbar {
  position: absolute;
  visibility: hidden;
  z-index: 200000;
  height: .3em;
  width: .3em;
  background-color: #333;
  opacity: 0;
  border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.km-vertical-scrollbar {
  height: 100%;
  right: 1px;
  top: 0;
}
.km-horizontal-scrollbar {
  width: 100%;
  left: 0;
  bottom: 1px;
}
.km-scroll-container {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-margin-collapse: separate;
}
.km-android .km-touch-scrollbar {
  background-color: #33b5e5;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}


来源:https://stackoverflow.com/questions/22955147/kendo-ui-dropdownlist-mobile-scrolling

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!