Hi all,
I've been using the CustomScrollPanel in order to implement my own
scrollbars. Everything was working fantastic up until I added DnD (gwt-dnd,
not native) to the elements within the scrollpanel. I noticed that there's
a huge lagging issue while dragging (updating the element's position
properties) within the panel. Upon further investigation with firebug I saw
that there are 2 divs in particular which are overlayed over the content of
the customscrollpanel which are contributing greatly to the performance
issue. I deleted these two extra elements in firebug and saw that no
functionality had been compromised with the panel and on top of the that
the performance of the dnd improved drastically.
What I found in testing for the html generated for the CustomScrollPanel
can be found below, I added my comments to add some identification.
My question is: does anyone know if there's a purpose for these DIVs, and
if they are essential, is there a workaround so I can have custom
scrollbars without impacting the dnd performance? And if they're not
essential, why are they there?
Also I found that for every nested DIV between your click and your element
to drag effects performance, are the 3 nested divs all necessary for custom
scrollbar functionality?
Thanks so much for any help in advance, and sorry for the long post, I've
just been trying to figure this out for the past week, a lot of hair pulled
:).
-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 -->
<div style="position: absolute; z-index: -32767; top: -20ex; width:
10em; height: 10ex;"> </div> <!-- I also found no purpose for this -->
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px;
right: -17px; bottom: -17px;"> <!-- DIV 1 -->
<div style="position: absolute; overflow: scroll; left: 0px; top:
0px; right: 0px; bottom: 0px;"> <!-- DIV 2 -->
<div class="GK40RFKDCB" style="position: relative; min-width:
20px; min-height: 20px;"> <!-- DIV 3 -->
<!-- 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>
<!-- 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>
--
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/-/53x9guq2uZsJ.
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.
