amoffat/bootstrap-application-wizard

Misplaced modal when window height is less than modal height

Opened this issue · 0 comments

I have noticed an issue with the behaviour of the wizard modal if the window height is smaller than the height of the modal. To top of the modal is positioned beyond the top of the window, and it is impossible to scroll up to the top of the modal in a small browser window.

The behaviour occurs because the top of the modal is positioned with the following code in bootstrap-wizard.js:

        // Reposition
        this.dimensions.offset = ($(window).height() - this.dialog.height()) / 2;           
            this.dialog.css({
                'margin-top': this.dimensions.offset + 'px',
                'padding-top': 0
            });

This positions the dialog in the centre of the current window viewport. If the window size is smaller than the modal, the modal is still vertically centered and the top is lost off the top of the window and cannot be accessed.

A quick and dirty fix is to specify a static top margin if the modal height is larger than the current window height:

        // Reposition
        this.dimensions.offset = ($(window).height() - this.dialog.height()) / 2;           

        if (this.dimensions.offset < 0) {
            this.dialog.css({
                'margin-top': '20px',
                'padding-top': 0
            });             
        } else {
            this.dialog.css({
                'margin-top': this.dimensions.offset + 'px',
                'padding-top': 0
            });
        }