Question

i am working with LightFace and it is working fine. i am fetching data from server side and assign data into LightFace dialog but the problem is dialog’s height and width is not getting bigger according to the content size. so please guide me what i need to rectify in the code. i have given little part of my code. i need that the dialog should grow & shrink according to the content size. please guide me with little code. thanks

 var modal = "";
    var sHtml = "";

    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#btnFeedback1").click(function () {
            var modal = new LightFace({
                draggable: true,
                height: 200,
                width: 300,
                title: 'My Profile',
                content: '<div class="BusyStyles"><div>',
                buttons: [
                { title: 'OK', event: function () {
                    if (Validate()) {
                        if (Save()) {
                            this.close();
                        }
                    }
                }
                },
                { title: 'Close', event: function () { this.close(); } }
            ]
            }).open();

            jQuery.ajax({
                type: "POST",
                url: "Dialog_LightFace.aspx/GetHtml",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    sHtml = data.d;
                    modal.load(jQuery(sHtml).find('#frm').html())
                    //modal.load('<div css="BusyStyles"><img src="images/fbloader.gif" border="0" /><div>');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }

            });

            return false;
        });
    });

Answer 1

If you could, please try to make a JSFiddle with some sample code. It’s easier for us to debug.

I think the problem is that you already open the dialogbox before you load in any content. Therefore, the dialogbox gets set on a width and height, before the content is determined.

Try this:

• Remove .open(); after making the var modal instance

• Put this in jQuery.ajax.success:

  success: function (data) {
    sHtml = data.d;
    modal.load(jQuery(sHtml).find('#frm').html()).open();
  }
  

If this is not helping, try to set width and height to 'auto' and see what happens.

Edit

Setting width and height programmatically:

jQuery.ajax({
   type: "POST",
   url: "Dialog_LightFace.aspx/GetHtml",
   data: {},
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (data) {
     var sHtml = data.d;

     // Get the element and dimensions
     var element = jQuery(sHtml).find('#frm');
     var width = element.width();
     var height = element.height();

     var modal = new LightFace({
       // all other options plus:
       width: width,
       height: height
     });
     modal.load(element.html()).open();
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus);
   }
});

This code might need a little tweaking, because I’m writing this directly, but this illustrates how it should be able to work.