Kendo listbox toolbar scrolls off screen in mobile view

[Hunter]

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?

 

 

[Alex Hajigeorgieva]

Hi, Hunter,

We have already discussed this in a private ticket, however, I will post my response here in the forum, too.

_____________________________________

The described behaviour sounds like the Kendo UI ListBox has 100% height. If you define a set height for the list box element, you would be able to scroll the list box and the toolbar will not be hidden.

Alternatively, in case 100% height is required, you can set a fixed position for the toolbar, however, using fixed styles is harder to maintain in the future, in case of any changes, therefore, I would not recommend it if you have an alternative.

Nonetheless, I created a simple test with a fixed toolbar for you:

 

https://dojo.telerik.com/@bubblemaster/UKAlIRiV

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

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

Kind Regards,
Alex Hajigeorgieva
Progress Telerik