jQuery Forum

I have the same behavior, except using jquery 1.4.2 and UI 1.8rc3!

It looks like there are two seperate issues at play

1) IE and Firefox define the viewport differently.  I don't dont know who is correct, but I'd be willing to bet....

2) On IE,  the call to .dialog('open') seems to add an extra 'position the viewport to it's bottom extreme', that doesn't happen on FF.

On IE,  if your page is very large, i.e. three times the size of the viewport say,  and you call dialog('open'),  you're left positioned down at the bottom of your page,  and your dialog isn't visible until you scroll up to see it.  FF works as expected.

I found a fix though that works for me,  after my call to dialog('open'),  I tack on a call to window.scrollTo(200,300).  I tried it first to test with the hard coded 200,300,  and suddenly my dialogs behave exactly as they do on FF!  Now even when I position the dialogs explicitly with positon: x, y,  it works and the dialog appears where I ask it to appear.  It doesn't seem to matter what values you pass to the scrollTo,  just calling it seems to fix everything!

1. $('#mydialog').dialog('open');window.scrollTo(200,300);
   
   

Weird!

Can you please create a sample page demonstrating the problem on http://jsbin.com/ ? Thanks.

Does not reproduce on jsbin (pretty cool, didn't know about it).

But that's just with the jsbin preselected UI 1.7.2 config.

Also remember I'm running 1.4.2 and the 1.8rc3 jquery-ui.*.js,  but I'm forced to use my old 1.7.2 theme css, because the new 1.8rc3 theme css breaks my site for now.

Can jsbin be configured any further beyond the menu choices?

It won't re-produce,  I'm going to point my real code to the repositories ala jsbin,  probably will fix me right up. I must of mangled my private download of the UI stuff.  Admit it, that 'please reproduce on jsbin.com' is programmed as a macro somewhere, isn't it?

Hmmm... still no luck,  I use the googlecode you posted in my development environment,  and I still get an extraneous 'scroll to bottom' on IE7 that doesn't happen on FF???  

I think it has something to do with the way I declare the div's that get dialoged.  I have about 30 divs, and I just defined them style="display:none" at the bottom of my html.  I just noticed that when rendered on IE7,  the viewport is much larger, i.e. there's a lot of empty scrollable page at the bottom in IE7 that isn't on FF.  Somehow when I declare those div's with display:none,  IE7 is still counting their size in the viewport determination.  I tried using the ui class for hidding, but that didn't change this behavior.  I think UI thinks it's doing the right thing, and I'm just declaring the div's in an IE7 incompatible way,  as evidenced by difference in the way the pages are rendered, prior to anything JQuery related happening.

Also, I'm using other JQuery stuff on my site, SlideviewerPro,  jrails,  etc.  I just may have to wait for those plugins to be properly upgraded to 1.4.2.  Trying to further reproduce this on jsbin might be more work than I can handle at the moment.


for now,  this fixes my situation:

1. window.scrollTo($('.selector').dialog('option', 'position')[0],$('.selector').dialog('option', 'position')[1]);

First, all my dialogs are positioned with an array of ints,  never by a positional string, i.e. 'center'.  I'm not sure what would happen if this were called on a dialog positioned with a string.

I just call this immediately after my dialog('open') and all is well ?????????

I'll see if I can fix the IE7 div problem I'm seeing and see if that fixes this issue.

I had the same issue so I downgraded from "jquery-ui-1.8.1.custom.min.js" to jquery-ui-1.7.1.custom.min.js. This fixed the issue right away.

 

Many many hours of debugging, should have checked here first.

The position- and overflow properties should also be applied to the CSS, as the delay between changing the DOM and the application of the CSS properties in the widget code could cause the page height problem.