BlueSpire/Durandal — pull request #292 by TommiGustafsson (2013-09-11 12:47:37+00:00)
Title: Correctly position dialog

Hello!

I noticed that Durandal's modal dialog was not centered properly. I made the following fixes:

## Take box-sizing:border-box into account

The previous implementation used jQuery width() and height() for determining the width and height of the dialog. This does not work correctly, when box-sizing: border-box is set, such is the case with Zurb Foundation 4.0 and Twitter Bootstrap 3.0. Both use * { box-sizing: border-box; } CSS-declaration.

Instead, we use now jQuery outerWidth and outerHeight to determine the correct width and height. As of jQuery 1.8, we can also use them as setters, which facilitates our problems with box-sizing. We also set the dialog width after determining the correct margin-left to ensure that the dialog stays at the correct size even after the margins are changed.

## Handled situations, when the dialog is higher than the window height.

Previously, there was no handling of the case when the dialog was higher than the window height. It simply showed partially, without any chance to scroll to the overflowing parts.

Now, the dialog maxes out at the window height, and then provides a scroll bar to scroll to overflowing content via overflow-y: auto.

## Handled a situation with images with unknown sizes in the modal

Previously images that loaded after the modal was shown caused it to be positioned incorrectly. In other words, the dialog did not reposition itself after images, which were within it, completed loading and gained their width and height.

Now, we subscribe to the loading event of the images without predefined height and width, and after they load, we reposition the dialog. I think this is the simplest approach. We could also define an animation to smoothly reposition and resize the dialog, but I opted not to do it, because it is a bit opinionated and maybe not everyone likes it. And anyways it would be harder to test.

## Feedback

Please let me know how you like this solution!