3

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.

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
    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
    Apr 19, 2010 at 5:50

4 Answers 4

3

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.

2
  • The only problem now is that width: 300px doesn't work in Firefox.
    – cdmckay
    Jan 15, 2010 at 0:24
  • Actually I rechecked this and it does not fix the problem. It merely makes it ignore the width.
    – cdmckay
    Apr 16, 2010 at 20:13
1

Add a 20px margin to the right of #test and increase the width of the dialog:

http://jsbin.com/ujevu

You'll still have a horizontal scrollbar but at least the content isn't obscured.

3
  • This is not a really a solution for me. I want it to work properly.
    – cdmckay
    May 1, 2009 at 18:39
  • So you mean you want to avoid the horizontal scrollbar? May 1, 2009 at 18:45
  • Yes. I don't understand how it can work fine in a normal window but not in a modal window. It vexes me.
    – cdmckay
    May 1, 2009 at 19:06
1

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 compensating 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.org/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 complicated hopefully you'll be able to modify the Javascript as necessary. Hope this works for you.

6
  • @Brainjam, I just gave it a go. It's definitely an improvement, but you still get the bottom scrollbar, which sucks but I guess is ultimately unavoidable.
    – cdmckay
    May 4, 2010 at 17:05
  • @cdmckay: when I submitted this answer, the bottom scrollbar was not happening, but I was on 32bit XP. After your reply today, I tried this on IE8/64bit/Windows 7, and got the bottom scrollbar. So phooey, it seems to depend on platform. Out of curiosity, what are you testing on?
    – brainjam
    May 4, 2010 at 20:27
  • @cdmckay: I looked a little further, and when I changed IE8 to compatibility mode, or to IE7 Standards mode, there was no bottom scrollbar in the dialog box. So I feel vindicated.
    – brainjam
    May 4, 2010 at 20:39
  • I'm using Windows Vista 64-bit with IE8 standards mode.
    – cdmckay
    May 4, 2010 at 20:55
  • @cdmckay: yeah, definitely doesn't work in IE8 standards mode. Is there any reason you formulated the original question using IE7? I thought that was odd.
    – brainjam
    May 4, 2010 at 21:32
0

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 completely, without changing any html / css.

The documentation on how to do this is available in the MSDN documentation http://msdn.microsoft.com/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;');"
2
  • Yeah the problem is I want the user to be able to scroll both vertically and horizontally if needed (i.e. if the content is too large to fit).
    – cdmckay
    May 11, 2009 at 2:04
  • I don't understand why the IE designers decided to make the modal window so different from a regular window? It doesn't make a whole lot of sense. Why not just make it a regular window (programatically) that happens to be modal?
    – cdmckay
    May 11, 2009 at 2:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.