search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Daypilot Modal (Mobile Safari Bug with Stretching)

Asked by Anonymous
2 years ago.

There's an issue on mobile safari caused by it not returning the correct documentElement.clientHeight/Width.

After testing some of the other ways to get the height of the modal I couldn't figure out one, so instead I changed it to pass in the currentHeight/Width to the hasVerticalScrollbar, and use that instead.

// width first
var maxWidth = width() - 40; // fixed 20px margin
for (var w = this.width; w < maxWidth && this.hasHorizontalScrollbar(w); w += 10) {
//this.iframe.style.width = (w) + 'px';
this.div.style.width = w + 'px';
this.div.style.marginLeft = '-' + Math.floor(w / 2) + "px"; //
}

// height
var maxHeight = this.maxHeight || height() - 2 * this.top;
for (var h = this.height; h < maxHeight && this.hasVerticalScrollbar(h); h += 10) {
this.iframe.style.height = (h) + 'px';
this.div.style.height = h + 'px';
}

this.hasHorizontalScrollbar = function(currentWidth) {
var document = this.iframe.contentWindow.document;
var root = document.compatMode === 'BackCompat' ? document.body : document.documentElement;

var scrollWidth = root.scrollWidth;
var children = document.body.children;
for (var i = 0; i < children.length; i++) {
var bottom = children[i].offsetLeft + children[i].offsetWidth;
scrollWidth = Math.max(scrollWidth, bottom);
}

var isHorizontalScrollbar = scrollWidth > (currentWidth - 10);
return isHorizontalScrollbar;

};

this.hasVerticalScrollbar = function(currentHeight) {
var document = this.iframe.contentWindow.document;
var root = document.compatMode === 'BackCompat' ? document.body : document.documentElement;

var scrollHeight = root.scrollHeight;
var children = document.body.children;
for (var i = 0; i < children.length; i++) {
var bottom = children[i].offsetTop + children[i].offsetHeight;
scrollHeight = Math.max(scrollHeight, bottom);
}

var isVerticalScrollbar = scrollHeight > (currentHeight - 10);
//var isHorizontalScrollbar = root.scrollWidth > root.clientWidth;
return isVerticalScrollbar;
};

There's probably a cleaner way to do this, but this worked for me and just wanted to post it in case anyone else was running into the same issue.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.