IE7 modal dialog scrollbars overlap content
Posted
by cdmckay
on Stack Overflow
See other posts from Stack Overflow
or by cdmckay
Published on 2009-05-01T18:17:46Z
Indexed on
2010/04/19
23:53 UTC
Read the original article
Hit count: 256
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.org/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.
© Stack Overflow or respective owner
