Make XUL dialog window show scroll when it doesn't fit the screen

Question

I'm building a stand-alone Win application that runs on Xulrunner (ver 23). In the application I need to open a modal dialog that is slightly larger than a client's typical screen height (1024). On the bigger screens I want the full modal window size to be shown. While on smaller screens all the content should be reachable by scrolling vertical scroll bar.

To summarize the ideal behavior of the modal window in this case would be:

A. It opens to fit all the content vertically and horizontally. But ...

B. If it doesn't fit the visible area it should stop at the boundaries and show scrollbars on the axis that didn't fit into the screen.

In order to achieve that I've tried the following:

1. Add "scrollbars=yes" to the strWindowFeatures parameter of the window.openDialog call. That doesn't seem to have an effect at all. Doing this violates requirement B.

2. Use style="overflow: auto" on the outermost element in the dialog. Then the new window shows the scrollbar when the dialog exceeds the screen. But it doesn't play nice with the borders of the screen and the task bar on the bottom. It ends several pixels below the bottom edge of the screen. See the picture:

Here is a test application I've put together where the two approaches above are demonstrated.

Before asking this question I've looked for an answer. Here is the best I could find:

• Stack Overflow: XUL prefwindow size problems.

• Ohloh: a code sample (see function size). Based on the comment it attempts to solve my problem. I didn't have much luck with solving the problem by the code samples modifications.

• Bugzilla: related bug in Firefox.

I'm still looking for a solution or a workaround. Any thoughts or suggestions will be greatly appreciated!

Answer 1

My initial thoughts: What do you think about this: on resize event, if the size goes beyond screen height, resize it to screen height, and then enable scrollbar. Also maybe call the windows centerWindowOnScreen function, im not sure if it resizes the window to stay within screen though, maybe just centers it like the function says:

Snippet thanks to @SergeyAvdeev:

window.addEventListener('resize', function(event) {
    // If the window is too large resize it to fit the available screen
    var outer = windowOuter(),
        avail = available();
    if (outer.x > avail.x || outer.y > avail.y) {
        window.resizeTo(Math.min(outer.x, avail.x), Math.min(outer.y, avail.y));
    }
}, true);