CODEWITHSUNDEEP
jqueryjquery-uicross-browser
Tesserex
Tesserex

Reputation: 17314

jQueryUI dialog position broken in Chrome and Safari

This seems really strange. Take a look at this fiddle in Firefox. http://jsfiddle.net/mjT5R/1/

Note that the fiddle is the jQueryUI basic dialog demo, verbatim.

The dialog, with no styling, appears in the center of the results frame. Now try in Chrome (my version is 8.0). It's at the top left, isn't it?

Now try adding some CSS (in Chrome). Add <link rel="stylesheet" href="http://www.jqueryui.com/themes/base/jquery.ui.all.css"> to the top of the HTML section. When styled, the position magically works!

So what gives, why is Chrome (and Safari, according to our test team) not correctly positioning the dialog? It's not just the iframe - full screen result has the same problem.

Upvotes: 1

Views: 5253

Answers (2)

Tesserex
Tesserex

Reputation: 17314

I actually found that our css is outdated on our website. The css that makes it work is to have .ui-dialog have position: absolute. In the old version it's relative, which breaks it in Webkit.

Upvotes: 1

mVChr
mVChr

Reputation: 50185

You just need to add the following CSS:

.ui-dialog { margin:0 auto; }

...and it should center as you want it to. I updated your fiddle to show this.

Upvotes: 4

Related Questions