Custom Inline Editor Scroll Issue

Gantt
#1

Hi,

We created a custom Inline Editor for selecting an item. Instead of using a “select”, we create our custom UI with JQuery. But one of our div have overflow auto css property so that we can scroll. But if we use mouse wheel to scroll inside this div, the entire gantt also scrolls. We only want our div inside the custom editor to scroll, and don’t want the entire gantt to scroll. Do you have any solution to this problem?

Thanks a lot!

#2

Hello Huiqi,
Unfortunately, I couldn’t reproduce it with the drop-down in the grid:
http://snippet.dhtmlx.com/2fc7c2b80
Please, reproduce your case in the snippet, then click on the “Share” button and send me the link.

#3

Hello ramil,

I was able to reproduce it, here’s the snippet (need to make your screen height really short so that the gantt will scroll vertically):
http://snippet.dhtmlx.com/f68c57919

The essential thing to reproduce this problem are:

  1. the custom editor (in your snippet is a renderer - but still reproducable) is not a select. Is just combination of divs (we cannot use native select because we want custom functionality)
  2. the gantt is vertically scrollable (I added a layout in the config to ensure the gantt is scrollable when the window height is short)

image
image1296×436 40.6 KB

The issue is:

  1. if the window height is tall enough, if you scroll inside the render, the render scrolls normally as designed (because we have overflow auto)
  2. if the window height is not tall enough (or if we have a lot of tasks), and then you scroll inside the renderer, the gantt scrolls first. The renderer div only scrolls when the gantt itself cannot scroll anymore

Let me know if you have any questions

#4

Hello Huiqi,
Thank you for the clarification.
Looks like, it happens because Gantt listens to the scroll events. Unfortunately, there is no built-in feature to change that. But you can hide the scrollbar when the mouse is over the container and show it when the mouse is outside the container. Here is an example of how it might work:
http://snippet.dhtmlx.com/5df75c7db