This is a migrated thread and some comments may be shown as answers.

Kendo listbox toolbar scrolls off screen in mobile view

1 Answer 73 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Hunter
Top achievements
Rank 1
Hunter asked on 11 Mar 2019, 07:42 PM

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?

 

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 13 Mar 2019, 01:50 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListBox
Asked by
Hunter
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or