Javascript – IE7 modal dialog scrollbars overlap content

cssinternet-explorer-7javascriptmodal-dialogscrollbar

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.

Best Solution

Change 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.