Блог

У меня есть Kendo listbox с панелью инструментов, которая позволяет сортировать (вверх / вниз) и удалять элемент списка. Когда в моем listbox достаточно элементов, которые расширяют его за пределы просмотра на мобильном устройстве, прокрутка вниз приводит к прокрутке панели инструментов за пределы экрана. Из-за этого, если пользователь хочет переместить нижний элемент списка вверх, ему приходится прокручивать вниз, выбирать элемент, затем прокручивать обратно вверх, чтобы получить доступ к действиям на панели инструментов, что ухудшает пользовательский опыт. Как заставить панель инструментов прокручиваться вместе со списком или даже просто дублировать панель инструментов внизу списка?

Вот мое определение виджета:

 $("#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");
    },
});
  

Я смог исправить расположение панели инструментов с помощью CSS. Это необходимо, если ваш ListBox будет использовать нефиксированную высоту, как в моем случае, мне нужно было использовать «height: 100%», чтобы размер ListBox был равен содержимому. Вам нужно будет поиграть со значениями ширины и левого поля в соответствии с вашей ситуацией.

 <style>
    .k-listbox {
        width: 275px;
        height: 100%;
      }


  .k-listbox-toolbar {
    top:10;
    position:fixed;
    width:auto;
    z-index: 1;
    margin-left: 42px !important;
  }
</style>