#1876 closed enhancement (fixed)
ui.dialog.js - Dialog Positioning Improvement
Reported by: | ALLPRO | Owned by: | rdworth |
---|---|---|---|
Priority: | minor | Milestone: | 1.5 |
Component: | ui.core | Version: | 1.2.1 |
Keywords: | dialog | Cc: | |
Blocked by: | Blocking: |
Description
The current code for positioning a dialog window does not work if the dialog source DIV is 'hidden', which is likely to be a common way of using the dialog component. (I put my dialogs inside a hidden container div.) The problem is that you cannot 'measure' a div that is not displayed. This prevents the proper positioning of the dialog, such as 'center'.
There is a very simple solution - set...
display: block; visibility: hidden
...before measuring width and height. This allows dimensions to be taken without making the DIV visible.
Here is the modified 'open' code - only the first and last lines are new...
this.open = function() { uiDialog.appendTo('body')'''.css({ visibility: 'hidden' })'''.show(); var wnd = $(window), top = 0, left = 0; switch (options.position) { case 'center': top = (wnd.height() / 2) - (uiDialog.height() / 2); left = (wnd.width() / 2) - (uiDialog.width() / 2); break; case 'left': top = (wnd.height() / 2) - (uiDialog.height() / 2); left = 0; break; case 'top': top = 0; left = (wnd.width() / 2) - (uiDialog.width() / 2); break; } uiDialog.css({ top: top, left: left, visibility: 'visible' }); };
Change History (5)
comment:1 Changed 15 years ago by
comment:2 Changed 15 years ago by
Owner: | set to rworth |
---|
comment:3 Changed 15 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
This seems to be working as of [4079]. Added a test to http://dev.jquery.com/view/trunk/ui/current/tests/uiTest.dialog.html for regressions.
comment:5 Changed 14 years ago by
Milestone: | → 1.5 |
---|
NOTE: There is a typo in the code line above. I tried to bold a block of 'code', but it added the "' formatting code for bolding to the string instead. The first line should read: