Hi all, I've used the CustomScrollPanel in order to implement some custom scrollbars, everything was working great until I added DnD (gwt-dnd, not native) functionality to an element in the scrollpanel. The dragging action on the elements within is extremely laggy. After a good amount of testing I found that the issue had to do with the CustomScrollPanel since using a regular ScrollPanel performs just fine with minimal lag if any. I then looked at what is generated for the customscrollpanel to work and found some divs had been generated which I couldn't attribute any specific functionality to (ITEMs 1 & 2 below). They're basically just overlaying the whole scrollpanel area and deleting them with firebug did not affect the customscrollpanel functionality, but deleting them did improve the dnd performance considerably. I see that the more elements that are layered between the mouse click and the target element affect the performance to a good degree.
My question is does anyone know if these extra DIVs are needed, and if so is there a way to workaround so I can still have the custom scroll bars with good DnD. There's also a good reason for my using gwt-dnd over native. I've been struggling with this for over a week now and it's driving me crazy, so hopefully someone can help. Thanks a lot in advance for any help and sorry for the long post. The generated elements for the customscrollpanel are in the code below. -Seth <div class="ScrollArea" style="position: relative; overflow: hidden; > height: 600px;"> > <!-- this div is up to the upper left corner doing seemingly nothing > at all ITEM 3--> > <div style="position: absolute; z-index: -32767; top: -20ex; width: > 10em; height: 10ex;"> </div> <!-- does not seem to be needed --> > <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; > right: -17px; bottom: -17px;"> > <div style="position: absolute; overflow: scroll; left: 0px; top: > 0px; right: 0px; bottom: 0px;"> > <div class="GK40RFKDCB" style="position: relative; min-width: > 20px; min-height: 20px;"> > > <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! > ITEM 1--> > <!-- this div seems to be doing nothing but overlaying --> > <div style="visibility: hidden; position: absolute; > height: 100%; width: 100%; overflow: scroll;"> > <div style="height: 1324px; width: 1458px;"></div> > </div> > > <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! > ITEM 2--> > <!-- this div seems to be doing nothing but overlaying --> > <div style="visibility: hidden; position: absolute; > height: 100%; width: 100%; overflow: scroll;"> > <div style="width: 200%; height: 200%;"></div> > </div> > <div class="dragdrop-dropTarget dragdrop-boundary" > style="position: relative; overflow: hidden;"> > <table cellspacing="0" cellpadding="0" border="0" > style="width: 100%; table-layout: fixed;"> > > <div class="testRed dragdrop-draggable > dragdrop-handle" style="position: absolute; top: 900px; left: 500px;">Hello > World</div> > </div> > </div> > </div> > </div> > <!-- this div is the corner box bottom right which comes up when both > scrollbars are displayed --> > <div style="position: absolute; overflow: hidden; right: 0px; bottom: > 0px; width: 17px; height: 0px;"> > <div class="GK40RFKDII" style="position: absolute; left: 0px; top: > 0px; right: 0px; bottom: 0px;"></div> > </div> > <!-- this div seems to be the container for the bottom scroll bar but > it is disabled if not horizontal scroll is needed --> > <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; > right: 0px; bottom: 0px; display: none;"> > <div class="GK40RFKDDJ GK40RFKDCB" style="height: 17px; position: > absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"> > <div class="GK40RFKDCJ GK40RFKDJI"> > <div class="GK40RFKDBJ"></div> > </div> > </div> > </div> > <!-- this is the div container for the scrollbar to the right --> > <div style="position: absolute; overflow: hidden; top: 0px; right: > 0px; bottom: 0px; width: 17px;"> > <div class="GK40RFKDAJ GK40RFKDCB" style="width: 17px; position: > absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"> > <div class="GK40RFKDPI GK40RFKDLI"> > <div style="height: 1224px;"></div> > </div> > </div> > </div> > </div> > Thanks again. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/kID-qZLB47UJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
