Skip to main content

Search and Top Navigation

#9942 closed bug (notabug)

Opened March 29, 2014 10:15PM UTC

Closed March 30, 2014 03:44PM UTC

UI Dialog Fails To Vertically Center in Viewport

Reported by: thinkcomp Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:

I used to use jQuery UI 1.7.2, and as part of that I used its Dialog capability to display dynamic HTML content in a modal popup. The idea was that you'd click a link, and depending on whether or not a certain browser extension was detected, the modal dialog might appear and encourage you to download that extension.

With jQuery UI 1.7.2, the modal would always appear perfectly in the vertical center of the viewport. Then I updated to 1.10.4, and suddenly the dialog began appearing way down the page, usually half-in, half-out of the viewport, at a semi-arbitrary location. I looked into the CSS I had been using before with 1.7.2, where .ui-dialog was defined as (by default):

.ui-dialog { position: relative; padding: .2em; width: 300px; }

With 1.10.4, I saw that it was defined as (also by default):

.ui-dialog { overflow:hidden; position:absolute; top:0; left:0; padding:.2em; outline:0 }

I tried changing it back, but it made no difference. The code to call the dialog hasn't changed at all since then either. In fact, deliberately downgrading to 1.7.2 makes it magically work again. Here's the call:

$("#getRECAP").dialog({ width: 480, height: 300, modal: true, position: { my: "center", at: "center", of: window } });


It looks like in 1.10.4, it's finding the hidden DIV (with ID "getRECAP") at the bottom of the page that has this dynamic content with which I populate the dialog, and then placing the dialog about -4500px plus-or-minus relatively from there. It's still not even close to being in the vertical center of the viewport as it used to be with 1.7.2.

So, I'm not sure what I'm doing wrong here. Here's the URL to one example affected page:

Click on any of the docket entry numbers with a little globe icon to reproduce.

Attachments (0)
Change History (1)

Changed March 30, 2014 03:44PM UTC by scottgonzalez comment:1

resolution: → notabug
status: newclosed

That page is in quirks mode. Use a proper doctype to trigger standards mode.