javascriptkendo-uikendo-listview

Kendo listbox toolbar scrolls off screen in mobile view


I have a Kendo listbox with a toolbar that allows sorting (up/down) and delete of a list item. When my listbox has enough items that extends it beyond the view of a mobile device, scrolling down causes the toolbar to scroll off screen. Because of this, if a user wants to move the bottom item of the listbox up, they have to scroll down, select the item, then scroll back up to access the toolbar actions, which makes for poor user experience. How can make the toolbar scroll along with list, or even just duplicate the toolbar at the bottom of the list?

Here is my widget definition:

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

Solution

  • I was able to fix the location of the toolbar using CSS. This is needed if your listBox is going to use a non-fixed height, as in my case, I needed to use "height:100%" so the size of the listBox would equal the content. You'll need to play around with the width and margin-left values to suit your situation.

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