Durandal modal/dialog context that allows scrolling on mobile devices

Question

Durandal provides a modal dialog facility which works great on desktop devices, and it allows you to control the presentation of the dialog via the "dialog context".

The default dialog context will, among other things, "display your dialog's view centered on the screen." Observationally, I can see that this means centering the dialog in the viewport--which means that as you scroll up and down, it remains in the same location, in the middle of your viewport.

This works fine a screen large enough to see the entire dialog; but on mobile devices, particularly phones, the dialog may be larger than the screen, especially if the user zooms in. When this happens, it is impossible for the user to pan around the dialog.

I would like to change this behavior by using a custom dialog context that positions the dialog in the center of the viewport initially, but then leaves it anchored to a fixed spot on the page, so the user can pan around.

So far I have been unable to figure out how to setup a custom dialog that observes the regular Durandal defaults, except for the "center in the viewport" rule. I'm not even positive I want or need to do this as a custom context; there may be a CSS rule that will accomplish this? Any help would be greatly appreciated.

Answer 1

As suggested by Abhinav Gauniyal and PW Kad (thank you!), a CSS solution turned out to be much simpler than a custom context.

After some digging, I found that by changing position: fixed to position: absolute in durandal.css, on the .modalHost rule, I was able to get the behavior I was looking for.

Better would be a completely separate UX for mobile devices that was tailored to their screen size, and that's definitely the direction we want to head--but today I wanted to at least make it possible for existing users to pan around and see the entire modal dialog, instead of leaving them with something completely unusable until we've got a "complete" mobile UX in place.