Modal windows does not resize automatically

I’m not sure if this is a bug or a feature, but when using modal windows in Internet Explorer, your HTML is not updated when the window.onresize event is fired. This is pretty annoying, since it is possible and even valid to open modal windows that is resizable:

var result = window.showModalDialog("/mypage.aspx", window, "dialogHeight:500px; dialogWidth:700px; resizable:Yes; scroll:No");

Notice the resizable:Yes parameter, which allows the modal window to be resized.

If your window contains HTML that resizes to the client width and height, and you resize the window, the window.onresize event is in fact fired, but your HTML does not change.

How do you overcome this issue? You will have to resize the HTML yourself, by hooking into the window.onresize event. Add the following to your HTML:

<script language="javascript" type="text/javascript">
  window.onresize = function() {
  }
</script>

There is several ways to write HTML that can be resized. First of all, and most important, the elements that needs to be resized must be accessible from Javascript, so you will have to add the id attribute to the HTML elements to resize.
In my own project I added a table to my HTML. The table has the advantage of being dynamic in nature, and it is possible to select which columns that have a variable size and which have a dynamic size. Observe the following example:

<table id="tbl" width="700px" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200px">
      <div id="colLeft">
        <!-- Some html -->
      </div>
    </td>
    <td width="100%" valign="top">
      <div id="colCenter">
        <!-- Some html -->
      </div>
    </td>
    <td width="200px">
      <div id="colRight">
        <!-- Some html -->
      </div>
    </td>
  </tr>
</table>

My table has an id called “tbl” and starts with a width of 700px which is the default size of the modal dialog. The first and last columns are fixed in size, leaving the middle column resizable. To resize the table by width, all I have to add to my window.onresize is:

window.onresize = function() {
  document.getElementById("tbl").width = document.documentElement.clientWidth;
}

The height is pushed to the default modal box height of 700px using the 3 div tags in each column, by adding a fixed height of 700px to each column:

#colLeft, #colCenter, #colRight {
  height:700px;
}

To resize in height i will need to resize each div tag individually:

window.onresize = function() {
  document.getElementById("tbl").width = document.documentElement.clientWidth;
  document.getElementById("colLeft").style.height = document.documentElement.clientHeight;
  document.getElementById("colCenter").style.height = document.documentElement.clientHeight;
  document.getElementById("colRight").style.height = document.documentElement.clientHeight;
}

Please notice that 2 onresize events are fired: One when resized in height and one when resized in width. You can therefore make your Javascript more effeicient by saving the old clientWidth and clientHeight in variables, and only resize the HTML if the values are changed:

var oldClientHeight = 0;
var oldClientWidth = 0;

window.onresize = function() {
  if (document.documentElement.clientWidth != oldClientWidth) {
    document.getElementById("tbl").width = document.documentElement.clientWidth;
    oldClientWidth = document.documentElement.clientWidth;
  }
  if (document.documentElement.clientHeight != oldClientHeight) {
    document.getElementById("colLeft").style.height = document.documentElement.clientHeight;
    document.getElementById("colCenter").style.height = document.documentElement.clientHeight;
    document.getElementById("colRight").style.height = document.documentElement.clientHeight;
    oldClientHeight = document.documentElement.clientHeight;
  }
}

This reduces flickering a little bit.