How do you Autosize a jQuery Popup Dialog box?-CodePudding

I have been using the same method and script for jQuery Popup dialog boxes for a long while now, and this has worked very well for my requirements for content that is reasonably static i.e. height never was important because the content was always the same.

The problem I now face is that I would like to use this for a different application where the content is now dynamic and the height changes.

I have read through the jQuery documentation, read some other posts on Stack Overflow, but just cannot get this right. In summary, I want to set the height of the container/popup to be automatic to cater for the content.

It may not be the best script, but this is it:-

<script>
    function GetPRComments(txt){
    $.get("pur_req_comments.cfm?XReqNo="   txt, function(data) {
        $("#CommentsPopup").html(data);
        $("#CommentsPopup").dialog({
            height: 300,
            width: 465,
            title: "Purchase Requisition Details: "   txt,
            modal: true,
            dialogClass: "PRComments",
        });
    });
    }
</script>

Below is a view of the output based on the above script. One of the records has a brief description, and the other has a more detailed description. What I would like to achieve is to eliminate the extra space and make the content fit.

I was (very simply) hoping that Height: 'auto' would have done the trick here, but sadly this does not appear to fix the problem. I have a feeling this may need to be be re-written, but not sure. I have also tried using maxWidth.

I have also read up on ("resize", "auto") but I don't think that will work for my existing script? I just cannot understand this.

Any help or pointers will help. Jack

CodePudding user response：

Consider this approach using "auto":

function GetPRComments(txt){
  $.get("pur_req_comments.cfm?XReqNo="   txt, function(data) {
    $("#CommentsPopup").html(data).dialog({
      height: "auto",
      width: 465,
      title: "Purchase Requisition Details: "   txt,
      modal: true,
      dialogClass: "PRComments",
    });
  });
}

If you want to set a height, you can calculate it.

function GetPRComments(txt){
  $.get("pur_req_comments.cfm?XReqNo="   txt, function(data) {
    $("#CommentsPopup").html(data);
    var h = $("#CommentsPopup").height();
    if(h < 300){
      h = 300;
    }
    $("#CommentsPopup").dialog({
      height: h,
      width: 465,
      title: "Purchase Requisition Details: "   txt,
      modal: true,
      dialogClass: "PRComments",
    });
  });
}