ansaurus

Question

IE7 modal dialog scrollbars overlap content

Answer 1

+1 A:

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.

brianpeiris 2009-05-01 18:35:46

This is not a really a solution for me. I want it to work properly.

cdmckay 2009-05-01 18:39:09

So you mean you want to avoid the horizontal scrollbar?

brianpeiris 2009-05-01 18:45:23

Yes. I don't understand how it can work fine in a normal window but not in a modal window. It vexes me.

cdmckay 2009-05-01 19:06:02

Answer 2

A:

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;');"

maxsilver 2009-05-10 18:18:28

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 2009-05-11 02:04:01

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 2009-05-11 02:04:57

Answer 3

+3 A:

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.

Adam Hepton 2009-07-27 09:22:57

The only problem now is that `width: 300px` doesn't work in Firefox.

cdmckay 2010-01-15 00:24:47

Actually I rechecked this and it does not fix the problem. It merely makes it ignore the width.

cdmckay 2010-04-16 20:13:49

Answer 4

+1 A:

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"&gt;
<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.

brainjam 2010-04-19 23:47:07

Thanks brainjam, I'll give it a try tonight.

cdmckay 2010-04-20 02:24:51

How did it go? Even in the right ballpark?

brainjam 2010-04-23 02:40:03

@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 2010-05-04 17:05:57

@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 2010-05-04 20:27:01

@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 2010-05-04 20:39:42

I'm using Windows Vista 64-bit with IE8 standards mode.

cdmckay 2010-05-04 20:55:43

@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 2010-05-04 21:32:12

@brainjam: Sorry, I formulated it in terms of IE7 because many of our clients use IE7. So I figured if I got an answer that worked in IE7, chances are it'd work in IE8 as well :)

cdmckay 2010-05-05 16:25:48

ansaurus

tags:

views:

answers:

IE7 modal dialog scrollbars overlap content

related questions