wallpaper does not fill entire page height and dialog does not reposition on orientationchange

[trainiac]

possible fix

css

.ui-actionsheet-wallpaper { background-color: black; opacity: .3; width: 100%; height: 100%; display: none; z-index: 10; /* added the following */ position:absolute; top:0; }

js

/* made changes to the open method, close method, and added to private methods (_positionContent, _resizeWallPaper)*/

open: function () {

        var currentContent = this.content.parents(':jqmData(role="content")');

        this.element.unbind('click'); //avoid twice opening

        this.wallpaper = $('<div>', {
            'class': 'ui-actionsheet-wallpaper'
        });

        this._resizeWallPaper(currentContent);

        this.wallpaper.appendTo(currentContent);

        $(window).bind('orientationchange.actionsheet',$.proxy(function () {
            this._resizeWallPaper(currentContent);
            this._positionContent();
        },this));

        this.wallpaper.show();

        window.setTimeout(function (self) {
            self.wallpaper.bind('click', function (event) {
                self.close();
            });
        }, 500, this);

        this._positionContent();

        this.content.animationComplete(function (event) {
            $(event.target).removeClass("ui-actionsheet-animateIn");
        });

        this.content.addClass("ui-actionsheet-animateIn").show();
    },
    close: function () {
        var self = this;
        this.wallpaper.unbind('click');
       /* only change here*/
        $(window).unbind('orientationchange.actionsheet');
        if (!$.support.cssTransitions) {
            this.wallpaper.remove();
            this.content.fadeOut();
            this.element.bind('click', function () {
                self.open();
            });
            return;
        }
        this.content.addClass("ui-actionsheet-animateOut");
        this.wallpaper.remove();
        this.content.animationComplete(function (event) {
            self.reset();
        });
    },
    _resizeWallPaper: function (currentContent) {

        var paddingLeft = currentContent.css('paddingLeft');
        var paddingRight = currentContent.css('paddingRight');
        var paddingTop = currentContent.css('paddingTop');

        this.wallpaper.css({ marginTop: '-' + paddingTop, marginLeft: '-' + paddingLeft, marginRight: '-' + paddingRight });
    },
    _positionContent: function () {

        var height = $(window).height();
        var width = $(window).width();
        var scrollPosition = $(window).scrollTop();

        this.content.css({
            'top': (scrollPosition + height / 2 - this.content.height() / 2),
            'left': (width / 2 - this.content.width() / 2)
        });

    }

[hiroprotagonist]

Hey Meta! Thanx for your work. I will merge your changes with the repository.

Cheers Stefan

[trainiac]

No Thank you! This is a huge missing piece of functionality in JQM. Glad I could help!

[hiroprotagonist]

https://github.com/hiroprotagonist/jquery.mobile.actionsheet/commit/c28a295f2f579bfcd849853cf6926b9896864ede