jquery modal dialog height issue

Question

I have a link in a grid on click of which i show the comments of that specific row on an overlay (jquery modal dialog). I show 3 columns on the overlay "Comments, Created Date, Created By". Below is the code in document.ready() which i am using to acheive this:

$(document).ready(function () {
$("#dvNotesPopup").dialog({
        autoOpen: false,
        width: 450,
        height: "auto",
        buttons: [{
            text: "Ok",
            click: function () {
                $(this).dialog("close");
            }
        }
        ]
    });
..... // some other code here
......// some other code here
});

Below is the On click event and the div which has the table

 $("#dvNotesPopup").dialog("open"); 
 <div id="dvNotesPopup" title="Notes"  style="z-index: 999999">

My problem is when i click on a link which has very huge comment text the overlay is displayed with big height and now when i close this pop up and click on the link which has small comment text, The overlay is still having the old height attributes and the grid size is very small inside the overlay. I mean the overlay is not getting resized according to the div in which the grid is present. Any help?

Answer 1

Setting the height: "auto !important", solved my issue. The problem is that the overlay is picking up the height of previously closed one. setting !important made the height to be set correctly each time i open the overlay