Here's the offending code. To test it, save it in a file called "test.html" and click the button in the top-left corner.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html>
<head>
<title>Blarg</title>
<style type='text/css'>
body { margin: 20px; }
#test { background: red; height: 2000px; }
</style>
</head>
<body>
<div id="test"><input type='button' onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" /></div>
</body>
</html>
If I open the page in normal IE7 window, it works fine.
However, if I open it in an IE7 modal dialog, it draws the vertical scrollbar on top of the margin. What's even worse, because it draws the scrollbar on top of the margin, it also causes a horizontal scrollbar to be drawn.
How do I work around this? I absolutely must use the IE modal dialog, I'm not at liberty to change that.
Here's the offending code. To test it, save it in a file called "test.html" and click the button in the top-left corner.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Blarg</title>
<style type='text/css'>
body { margin: 20px; }
#test { background: red; height: 2000px; }
</style>
</head>
<body>
<div id="test"><input type='button' onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" /></div>
</body>
</html>
If I open the page in normal IE7 window, it works fine.
However, if I open it in an IE7 modal dialog, it draws the vertical scrollbar on top of the margin. What's even worse, because it draws the scrollbar on top of the margin, it also causes a horizontal scrollbar to be drawn.
How do I work around this? I absolutely must use the IE modal dialog, I'm not at liberty to change that.
Share Improve this question asked May 1, 2009 at 18:17 cdmckaycdmckay 32.3k25 gold badges86 silver badges114 bronze badges 2- Could you elaborate on the ground rules for this? Do you want IE7 modal dialogs to work for any URL, or just HTML of your creation? Is the HTML limited to what you have here? And is Javascript allowed? It appears that IE modal dialogs are different from IE windows and other browser modal dialogs, so we can't walk on water. – brainjam Commented Apr 19, 2010 at 0:56
- @brainjam I sure can. I control the HTML, the HTML is essentially what I have here except that the height isn't set to 2000px (it instead grows with the contents), it only needs to work for the modal dialogs, it needs to work on IE and Firefox. JavaScript is certainly allowed. Also, the horizontal slider needs to be gone except when the width is wider than the dialogWidth. – cdmckay Commented Apr 19, 2010 at 5:50
4 Answers
Reset to default 3Change your window.showModalDialog options to use width: 300px instead of dialogWidth: 300px - the horizontal scrollbar disappears, and the vertical scrollbar is to the right of the margin.
Add a 20px margin to the right of #test and increase the width of the dialog:
http://jsbin./ujevu
You'll still have a horizontal scrollbar but at least the content isn't obscured.
As you mention, the IE modal dialog does not quite work like a normal browser window. By trying various things, you can sort of reverse engineer how it works and pull some pensating tricks. You stated that you have control of the HTML, that it's OK to use Javascript, so here's what I came up with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Blarg 2</title>
<style type='text/css'>
body { margin: 20px; width:1px}
#test { background: red; height: 500px; }
</style>
<script>
window.onload=windowResized;
window.onresize=windowResized;
function windowResized()
{
var cw = document.documentElement.clientWidth ;
var margin = 20 ;
document.getElementById("test").style.width=(cw-2*margin)+"px" ;
}
</script>
</head>
<body>
<div id="test" >
<input type='button'
onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" />
There is a bit more than meets the eye here.
</div>
</body>
</html>
The crux of this code is to resize the width of the <div> that contains the content. Ordinarily this width would be the width of the window (less the margins), but in the case of the IE modal dialog, we should use the width of the window less the scrollbar width. This is given to us by document.documentElement.clientWidth. We do this resizing when the dialog is loaded and whenever it is resized.
The initial width of the body (upon load, but before we resize the <div>)seems to confuse IE, so we set it to 1px. So that's a 'magic number' in the code, as is the var margin = 20 ;, which must match the CSS margin. I've also set the div height to 500px so that it's easier to see what happens when the vertical scroll bar is on or off.
I've tested this in IE6/7/8 and Chrome on Windows XP, and FF3.6 and Chrome on the Mac. I've made the code here as simple as possible, so if the contents of your div get more plicated hopefully you'll be able to modify the Javascript as necessary. Hope this works for you.
You could work around this issue, by doing what brianpeiris suggests (add margin for the scrollbar) and adding an overflow-x:hidden; css to your html element. This will hide the horizontal scrollbar.
IE seems to treat modal windows really oddly, so most of the normal ideas (javascript window resize, css fixed pixel widths) don't work inside an "IE Modal Window"
--
Additionally, you could simply add a flag to your showModalDialog call, to remove the scrollbars pletely, without changing any html / css.
The documentation on how to do this is available in the MSDN documentation http://msdn.microsoft./en-us/library/ms536759(VS.85).aspx
In your code, if you wanted to remove the scrollbars, it would look something like this
onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes; scroll:off;');"