时间戳

首页 > 解决方案 > 剑道列表框工具栏在移动视图中滚动到屏幕外

javascript - 剑道列表框工具栏在移动视图中滚动到屏幕外

问题描述

我有一个带有工具栏的 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");
    },
});

标签： javascriptkendo-uikendo-listview

解决方案

我能够使用 CSS 修复工具栏的位置。如果您的列表框要使用非固定高度，则需要这样做，在我的情况下，我需要使用“高度：100%”，以便列表框的大小等于内容。您需要使用 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>

推荐阅读