Question

I would like to change the width of jquery dialog box based on the title length and have
added the all necessary js and css files include resizable js and css.

i tried to increase width but still it isn’t working

Please help to solve this problem.

div for dialog box :

<div id="dialog" title=""
    style="display: none; font-size: 15px; width: 600; height: 400"></div>
<div align="center">

javascript :

function showMsg(title,content)
  {

      if($(title).width()>600)
          {
          $("#dialog").dialog({ width: $(title).width()+20 });
           }
      else
          {
         $("#dialog").dialog({ width: 600 });
          }

      $("#dialog").dialog({ height: 400 });
      $("#dialog").css('display', '');
      $( "#dialog" ).css('line-height','25px');
      $( "#dialog" ).dialog( "option", "title",title );
      $("#dialog").html(content);
      $( "#dialog" ).dialog({ show: { effect: 'drop', direction: "up" } });
      $("#dialog").dialog();


  }

html content :

<a href="javascript:showMsg('dynamictitle','dynamicontent');">

style css :

ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/;  background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;   color: brown/*{fcHeader}*/;    font-size: medium; }
.ui-widget-header a { color: #222222 /*{fcHeader}*/; }

Answer 1

You can’t calculate string width directly by calling : $(title).width().

Use this function to calculate title string width:

    function textWidth(text){
     var calc = '<span style="display:none">' + text + '</span>';
     $('body').append(calc);
     var width = $('body').find('span:last').width();
     $('body').find('span:last').remove();
     return width;
    };

Use this function like : width = textWidth(title);