[Dojo-interest] more on Dialog - followScroll
sdpaulsen at ucdavis.edu
Fri Jan 19 10:59:29 MST 2007
twiddling with html, css, and the dom as a hobby for several years,
and am new to Dojo. This is my first major project with Dojo for a
webapp. Sorry for the length here, but I'm trying to be as clear as
I'm working with a Dialog that I now have (mostly) working how I want,
but I have a problem with the dialogUnderlay protecting the rest of
the page. The page can be scrolled and the dialog and dialogUnderlay
both scroll with it, even though I have followScroll:true defined in
The same thing happens when I try the unit tests installed locally or
running them directly from dojotoolkit at
The dialog comes up, but I can scroll the page and select text that
isn't covered by the dialogUnderlay, and can even "Show Second Dialog"
and get them both showing at the same time.
My development environment is:
Dojo 4.1 rev 6824
Redhat Fedora Core 6 (uname -r="2.6.18-1.2869.fc6")
Tracing through Dialog.js shows that it *is* hooking the onscroll event...
line 255: dojo.event.connect(window, "onscroll", this, "_onScroll");
but when I scroll after the dialog appears an onscroll event is never
fired -- that is, a breakpoint in _onScroll() @ line 298 is never hit.
I've been trying some possible workarounds ...
One thing I've done is to expand the dialogUnderlay so instead of
covering just the viewport it covers the whole page:
pageBox = dojo.html.getMarginBox(dojo.body());
/* more setup, show the dialog */
dojo.html.setStyleAttributes(underlay, "top:0px; left:0px;")
This works great, making the dialogUnderlay the same size and position
as the body; covering the whole page. The page can still be scrolled
and the dialog itself can be scrolled out of view, but the page is
protected by the underlay and I can live with that. The only problem
is that when the browser is resized the underlay and dialog are
repositioned, so I'll have to catch that and fix it again - or hack
the Dialog.js code to leave the underlay alone.
The other thing I've tried is to make the page unscrollable when the
dialog appears, by adding:
which works, but makes the page scroll back to the top. I can't have
that because the selected record that's being edited (in my dialog) is
highlighted and is supposed to stay in view. To try and fix that I added:
which brings it into view, but at the bottom of the viewport. It also
makes the page "flash" as it jumps to the top then brings the item
back into view. I also can't seem to find a way to put the clicked
item back exactly where it was.
My ideal solution would be to allow scrolling but have the dialog
remain in position and the dialogUnderlay always protect the page
content, which seems to be how followScroll is supposed to work.
Programmer :: UCD/IET/ADDA
Information and Educational Technology
University of California, Davis
One Shields Avenue
Davis, CA 95616
More information about the Dojo-interest