View Full Version : BasicDialog off screen when created low on page

7 Nov 2006, 11:51 AM
The BasicDialog, which is great by the way, seems to popup centered on the browser by default, making the rest of the page go gray.

However, when the dialog is tied to an element far down on the page, even scrolled way down, the BasicDialog pops up at the center of the top of the page (off and above the screen), and the portion marked gray is far above the button the user clicked.

For an example, use the Hello World application, and create a second button far, far, below the first one, so that you have to scroll down to get to it. You'll see, when you click that button, the dialog is created up above (at the top of the page), not where the page is scrolled to currently.

What to do?

7 Nov 2006, 11:55 AM
Update: note that on FF it instead scrolls the page to the top, whereas in IE it just presents at the top of the form while the user is at the bottom. Neither is really desirable.

7 Nov 2006, 2:53 PM
I've made an update to take into account scroll offsets when setting the default x/y. I will put up a build including it tonight.

7 Nov 2006, 3:23 PM
I've made an update to take into account scroll offsets when setting the default x/y. I will put up a build including it tonight.
Thanks, glad to know it's not a big deal to fix.

7 Nov 2006, 5:09 PM
Hmmm. This doesn't seem to be fixed in 0.33 Beta 4, just downloaded.

I'm using ASP.NET 2.0, a gridview, and a button on each line can show the dialog. The buttons are, naturally, all the way down the page, so that you have to scroll to get to the last one. If you choose the top one it's correctly centered, then scrolling down and choose the last one, the dialog and modal background gray are still up top.

I'm using code from the sample where it only creates the dialog variable once. Perhaps if I created it with each call?

7 Nov 2006, 5:11 PM
You may need to set the XY manually. I know that sucks. Can you put up a link showing the problem? That would help me find a solution for you that doesn't invlove you coding for a workaround.

7 Nov 2006, 5:21 PM
I'm planning to shift it to a public server tomorrow. You'll be able to see it then.

FYI, I notice that if you scroll down to the bottom (having not called the dialog), then call up the dialog, the dialog is correctly placed but the background gray is up top. Then, after dismissing the dialog, scroll to the top, call up the dialog, and the dialog appears down below with the gray where it belongs.

Apparently the background gray always goes to the top, while the dialog always goes where it was first presented. If that helps.

12 Nov 2006, 11:08 AM
I have forwarded you an example of this issue (in RC1) at a public URL via your Yahoo email account.

Thanks for giving it a look.

12 Nov 2006, 7:02 PM
The fix will be in RC2. Thanks.

I will repeat my note in the email here so others can find it:

Note: You will need to set fixedcenter:true (always recenter on display instead of remembering position) and constraintoviewport:false.

12 Nov 2006, 7:17 PM
Great! I look forward to giving it a try, and will let you know the results. I appreciate your efforts.

22 Nov 2006, 11:45 AM
Has anyone come up with a fix for this problem?

I've tried things such as:

var shadowXY = dialog.shadow.getCenterXY();
dialog.shadow.setXY([shadowXY[0] + dialog.shadowOffset, shadowXY[1] + dialog.shadowOffset]);

but the .getCenterXY() still doesn't take into account the scroll position...
also, the overlay in the background seems to adjust when the window resizes (in IE 7), but not on the scroll?

22 Nov 2006, 12:06 PM
Another Bug/"I'm probably doing something wrong"...but the width: 'auto' and height: 'auto' just doen't work for me.

I have a series of div's that I'm showing (using the BasicDialog) and they are different sizes...Is this working for anyone else?

22 Nov 2006, 12:57 PM
getCenterXY has another boolean param to include scroll.

In RC2 it uses this by default.

Auto width or height are not supported. Instead it does the reverse, fitting the panel in the middle to your dialog size. Doing it the other way wouldn't be too difficult and I will look at adding it.

22 Nov 2006, 3:15 PM
I'm kind of stuck...I took care of the scroll and overlay myself...but my problem is this:

I have one dialog that displays error messages. Something like:

<div id="dlgSkeleton" style="visibility: hidden; position: absolute; top:0px;">
<div class="ydlg-hd">Error</div>
<div class="ydlg-bd">
<div id="errorBody">
<span id="errMsg"></span>

So I change the 'errMsg' span to the correct error message and display the dialog. That works fine. It will be rather small for a one line message, but again..the first one always works fine. Here is how I am adjusting the size:

var d = getEl('errorBody');
var box = d.getBox('true');
var dialog = new YAHOO.ext.BasicDialog('dlgSkeleton', { width: box.width + 50, height: box.height + 80, etc...}

This will resize dialog just fine. (I put the + 50 and + 80 in there because of the title bar, padding, etc...). When I say it works fine, it even works if the first error is a huge paragraph. The dialog sizes perfectly.

My problem is when I want to show the next error that is a different size. I don't recreate the dialog, I attempt to resize it.
The following code returns [0,0] everytime:

$("errMsg").innerHTML = "some longer or shorter string";
var d = getEl('errorBody');
var box = d.getBox('true');

It works the first time..but not the second??? Hopefully someone understands what I'm trying to do.
How do I get the size of the 'errorBody' div the second time?

22 Nov 2006, 3:36 PM
Look in the help forum, there's a thread on this near the top with the solution. What you want to do is resize the dialog, not the body element.

22 Nov 2006, 3:44 PM
I saw that...but my problem is I don't know what the new size "should be".
If the error message is a long paragraph then the <span> is updated. I am trying to figure out what the new height should be.

that is why I was trying to get the inner div and maybe call the .autoHeight(), but that didn't work.
Does that make sence?

5 Dec 2006, 12:14 AM

I downloaded 0.33 rc3 and I'm still seeing the problem described a few posts earlier about the basic dialog appearing centered horizontally but at the top of a long page when a user is at the bottom.

I was able to work around it by using moveTo in order to move the dialog to the center right after calling show

var dialogCenter = dialog.el.getCenterXY(true);

I had to turn off animation because it looked a little awkward, otherwise, it seems ok.


5 Dec 2006, 5:43 AM
hgc, you can also call center(), which basically does the same thing.

11 Dec 2006, 7:52 AM
hgc, you can also call center(), which basically does the same thing.

I am still seeing this problem when I'm trying to open a dialog box on the bottom of the screen.


all you have to do is click on a car design on the lower part of the page and it will jump back up to the top to open the dialog.

is there i a fix for this?

11 Dec 2006, 8:33 AM
Ok I found the problem with the dialog not showing up when you scroll down.

In the BasicDialog.beforeShow() function you have this


but it should be this


that way it only calls it when you have it being constrained to the view port or am i wrong in assuming that as it works for me and is not setting my box to be in the default view port any more after i put in that if statement.

11 Dec 2006, 12:14 PM
That's not it. Look at the first line of constrainXY:

if(this.contraintoviewport !== false){

So set constraintoviewport false on your config (it defaults to true, as per docs).

11 Dec 2006, 12:25 PM
Ahh there is the problem Jack,

You have a type o. you are missing an 's'

if(this.contraintoviewport !== false){

-- should be --

if(this.constraintoviewport !== false){

I just checked with the doc version too and it's miss spelled.

11 Dec 2006, 12:29 PM
Ah nice catch! I never would have spotted that. I committed BasicDialog with the typo fixed.

12 Dec 2006, 12:01 AM
The perils of a language where variables pop into existence as soon as their name is mentioned!

Is there some kind of JS tool which can highlight things like this? Variables which are never initialized and the like? I've done this kind of thing many times!

12 Dec 2006, 6:43 AM
Since most of the time variable don't exist, tools like that are a pain more than a blessing. For example, when you use Config.apply().

Intellij has this feature built into the editor but when I used intellij I had to turn it off.

12 Dec 2006, 7:47 AM
Is this something that JSLint can flag?

12 Dec 2006, 9:38 AM
JSLint is about as valuable as any other type of lint...