我有一个带有工具栏的Kendo列表框,该工具栏允许排序(上/下)和删除列表项。当我的列表框有足够的项目扩展到移动设备的范围之外时,向下滚动会导致工具栏滚动到屏幕之外。因此,如果用户要向上移动列表框的底部项目,则必须向下滚动,选择该项目,然后向上滚动以访问工具栏操作,这会带来糟糕的用户体验。如何使工具栏与列表一起滚动,甚至只是复制列表底部的工具栏?
这是我的小部件定义:
$("#myMenus").kendoListBox({
selectable: "multiple",
toolbar: {
scrollable: true,
tools: [ "moveUp", "moveDown", "remove" ]
},
reorder: function(e) {
e.preventDefault();
var UID = $(e.items[0]).attr("data-uid");
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0]
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
e.sender.wrapper.find("[data-uid='"+UID+"']").addClass("k-state-selected");
},
});
答案 0 :(得分:0)
我能够使用CSS修复工具栏的位置。如果您的listBox将使用非固定高度,则需要这样做,例如,在我的情况下,我需要使用“ height:100%”,以便listBox的大小等于内容。您需要使用width和margin-left值来适应您的情况。
<style>
.k-listbox {
width: 275px;
height: 100%;
}
.k-listbox-toolbar {
top:10;
position:fixed;
width:auto;
z-index: 1;
margin-left: 42px !important;
}
</style>