IE8 ignores jQuery UI 'dialog' minHeight and height settings

Posted by Kev on Stack Overflow See other posts from Stack Overflow or by Kev
Published on 2010-12-23T14:35:24Z Indexed on 2010/12/23 14:54 UTC
Read the original article Hit count: 199

Filed under:
|
|

I'm using jQuery 1.4.4 with jQueryUI 1.8.7 to display a modal dialog box. I'm having a problem where IE8 renders a scrollbar and appears to ignore the minHeight and height options in all the many different combinations I've tried them in.

In Chrome 8 and Firefox 3.6 my dialogue looks like:

alt text

In IE 8 it looks like:

alt text

The markup and script looks like:

<a id="create" href="#">Create New Thing</a>
<div id="dlg-create-thing" title="Create new thing?">
  <form name="create-thing-form" id="dlg-create-thing-form">
    <p style="text-align:left">
    <span>Name: <input id="thingName" name="thingName" maxlength="12" size="30" /></span>
    <br /><br />
      <b>Thing options:</b><br /><br />
      <input type="radio" id="option1" name="theoptions" 
             value="0" checked="checked" />Use this option<br />
      <input type="radio" id="option1AndMem" name="theoptions" 
             value="1" />Use this other option
    </p> 
  </form>
</div>


<script type="text/javascript">
$(function () {
  $("#dlg-create-thing").dialog({
    autoOpen: false, resizable: false, width: 500, modal: true,
    minHeight: 280,  
    buttons: { 
      "Create": function () { /* do stuff */ },
      "Cancel": function () { /* do other stuff */}
    }
  });

  $("body").delegate("a[id='create']", "click",
    function () { 
        $("#dlg-create-thing").dialog('open');
      return false;
    }
  );

});
</script>

How can I fix this (preferably in a nice browser agnostic way, but I'd settle for anything)?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery