While working on a recent sprint on my task management software Kanban for Developers, I ran across an issue that took some time to track down. On the main screen of the application is a Kanban board with yellow boxes to represent tasks written on sticky notes on a white board. There are 5 different categories and the tasks can be dragged and dropped onto any of the categories. By default, categories are limited to only a small number of tasks to prevent users from being overwhelmed and so that the tasks will be displayed nicely on the board. However, users can edit the size of these categories and in the latest sprint, can double click on a task and it will expand to fit the text within the task. This can greatly increase the size the task category and look unsightly. Something needed to be done to reighn in the height of the task categories.
The simplest solution would be to add scrollbars via the CSS overflow property, but the appearance is less then desirable. Then I found a promising site with a list of 10 different scrollbar widgets.
While the site looked promising, there were some, like jScrollPane, which required too much setup and broke other parts of the application. Most of the other plugins would not work with the draggable plugin from jQuery UI. Once the draggable element reached the edge of the its parent container, the element disappeared behind the adjacent container. I encountered this behavior with jQuery scroll and Tiny Scrollbar. After trying a few different plugins, finally I was able to get the expected behvior out of the ShortScroll plugin.
Is Short Scroll the only choice for getting jQuery droppable and scrollbar plugibs to play nice with eachother? No, but if you encounter this issue with jQuery scrollbar and UI-Droppable elements, then you will probably have to switch your scrollbar plugin, as there does not appear to be a work around with many of these plugins.
Of course, this could change in a few months.
No comments:
Post a Comment