Add scrollbar width to iframe height, so vertical scrollbar doesn't appear

FIXME: add horizontal scrollbar detection so only adding the extra height
when it is actually needed.
This commit is contained in:
str4d
2012-07-14 00:13:33 +00:00
parent 7e7cabfdc2
commit f782afef8d
2 changed files with 50 additions and 2 deletions

View File

@@ -50,7 +50,31 @@
// but does not include the margin. Therefore, any content within the iframe
// should have no margins at the very top or very bottom to avoid a scrollbar.
var doc = 'contentDocument' in f? f.contentDocument : f.contentWindow.document;
f.style.height = doc.body.offsetHeight + "px";
var totalHeight = doc.body.offsetHeight;
// Detect if horizontal scrollbar is present, and add its width to height if so.
// This prevents a vertical scrollbar appearing when the min-width is passed.
// FIXME: How to detect horizontal scrollbar in iframe? Always apply for now.
if (true) {
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
scrollDiv.style.width = "100px";
scrollDiv.style.height = "100px";
scrollDiv.style.overflow = "scroll";
scrollDiv.style.position = "absolute";
scrollDiv.style.top = "-9999px";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
totalHeight += scrollbarWidth;
// Delete the div
document.body.removeChild(scrollDiv);
}
f.style.height = totalHeight + "px";
}
function setupFrame() {
f = document.getElementById("i2ptunnelframe");

View File

@@ -32,7 +32,31 @@
// but does not include the margin. Therefore, any content within the iframe
// should have no margins at the very top or very bottom to avoid a scrollbar.
var doc = 'contentDocument' in f? f.contentDocument : f.contentWindow.document;
f.style.height = doc.body.offsetHeight + "px";
var totalHeight = doc.body.offsetHeight;
// Detect if horizontal scrollbar is present, and add its width to height if so.
// This prevents a vertical scrollbar appearing when the min-width is passed.
// FIXME: How to detect horizontal scrollbar in iframe? Always apply for now.
if (true) {
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
scrollDiv.style.width = "100px";
scrollDiv.style.height = "100px";
scrollDiv.style.overflow = "scroll";
scrollDiv.style.position = "absolute";
scrollDiv.style.top = "-9999px";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
totalHeight += scrollbarWidth;
// Delete the div
document.body.removeChild(scrollDiv);
}
f.style.height = totalHeight + "px";
}
function setupFrame() {
f = document.getElementById("i2psnarkframe");