Панель инструментов списка кендо прокручивает экран в мобильном представлении - PullRequest
Новая
       27

Панель инструментов списка кендо прокручивает экран в мобильном представлении

0 голосов
/ 11 марта 2019

У меня есть список 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");
    },
});

1 Ответ

0 голосов
/ 12 марта 2019

Мне удалось исправить местоположение панели инструментов с помощью 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>
...