Automatically resize jQuery UI dialog to the width of the content loaded by ajax

Question

I m having a lot of trouble finding specific information and examples on this    I ve got a number of jQuery UI dialogs in my application attached to divs that are loaded with  ajax   calls   They all use the same setup call        mydialog   dialog           autoOpen  false          resizable  false          modal  true        I just want to have the dialog resize to the width of the content that gets loaded   Right now  the width just stays at 300px  the default  and I get a horizontal scrollbar   As far as I can tell   autoResize  is no longer an option for dialogs  and nothing happens when I specify it   I m trying to not write a separate function for each dialog  so  dialog  option    width    500   is not really an option  as each dialog is going to have a different width     Specifying width   auto  for the dialog options just makes the dialogs take up 100  of the width of the browser window   What are my options   I m using jQuery 1 4 1 with jQuery UI 1 8rc1  It seems like this should be something that is really easy   EDIT  I ve implemented a kludgy workaround for this  but I m still looking for a better solution

User · Answer

Had the same problem and thanks to you mentioning that the real problem was related to CSS I found the issue:

Having position:relative instead of position:absolute in your .ui-dialog CSS rule makes the dialog and width:'auto' behave strangely.

.ui-dialog { position: absolute;}

User · Answer

edit this bellow    x000D   x000D      message   dialog   x000D   autoOpen false  x000D   modal true  x000D   resizable  false  x000D   width  80    x000D   x000D   x000D

User · Answer

I had a similar problem   Setting width to  auto  worked fine for me but when the dialog contained a lot of text it made it span the full width of the page  ignoring the maxWidth setting   Setting maxWidth on create works fine though        selector    dialog     width   auto        maxWidth  660     This won t work   create  function  event  ui            Set maxWidth       this  css  maxWidth    660px

User · Answer

I imagine setting float left for the dialog will work  Presumably the dialog is absolutely positioned by the plugin  in which case its position will be determined by this  but the side-effect of float - making elements only as wide as they need to be to hold content - will still take effect   This should work if you just put a rule like   myDialog  float left    in your stylesheet  though you may need to set it using jQuery

User · Answer

I ve just wrote a tiny sample app using JQuery 1 4 1 and UI 1 8rc1   All I did was specify the constructor as   var theDialog       mydialog   dialog           autoOpen  false          resizable  false          modal  true          width  auto        I know you said that this makes it take up 100  width of the browser window but it works sweet here  tested in FF3 6  Chrome and IE8     I m not making AJAX calls  just manually changing the HTML of the dialog but don t think that will cause any probs   Could some other css setting be knocking this out   The only problem with this is that it makes the width off-centre but I found this support ticket where they supply a workaround of placing the dialog  open   statement in a setTimeout to fix the problem   Here is the contents of my head tag    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  jquery-ui min js  gt  lt  script gt   lt link href  jquery-ui css  rel  stylesheet  type  text css    gt   lt script type  text javascript  gt        function            var theDialog       mydialog   dialog               autoOpen  false              resizable  false              modal  true              width   auto                           one   click function                theDialog html  some random text   dialog  open                             two   click function                theDialog html   lt ul gt  lt li gt Apple lt  li gt  lt li gt Orange lt  li gt  lt li gt Banana lt  li gt  lt li gt Strawberry lt  li gt  lt li gt long text string to see if width changes lt  li gt  lt  ul gt    dialog  open                             three   click function                  this is only call where off-centre is noticeable so use setTimeout             theDialog html   lt img src    random gif  width  500px  height  500px    gt                 setTimeout function    theDialog dialog  open      100                          lt  script gt    I downloaded the js and css for Jquery UI from http   jquery-ui googlecode com files jquery-ui-1 8rc1 zip  and the body    lt div class  mydialog  gt  lt  div gt   lt a href     id  one  gt test1 lt  a gt   lt a href     id  two  gt test2 lt  a gt   lt a href     id  three  gt test3 lt  a gt

User · Answer

You can avoid the 100  width issue by specifying a maximum width  The maxWidth option does not seem to work  so set the CSS max-width property on the dialog widget instead   In case you also want to constrain the maximum height  use the maxHeight option  It will correctly show a scrollbar when necessary    x000D   x000D    function     x000D    var  dialog       dialog    x000D     dialog dialog   x000D      autoOpen  false  x000D      modal  true  x000D      width   auto  x000D        x000D       x000D       max-width should be set on dialog widget because maxWidth option has known issues x000D       max-height should be set using maxHeight option x000D        x000D     dialog dialog  widget   css  max-width     window  width   - 100   x000D     dialog dialog  option    maxHeight     window  height   - 100   x000D        test-link   on  click   function e    x000D      e preventDefault    x000D       dialog html   this hash  html     x000D         if you change the content of dialog after it is created then reset the left x000D         coordinate otherwise content only grows up to the right edge of screen x000D       dialog dialog  widget   css   left  0     x000D       dialog dialog  open    x000D        x000D      x000D   import url  https   code jquery com ui 1 11 4 themes smoothness jquery-ui min css    x000D   lt script src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt  x000D   x000D   lt div id  dialog  gt  lt  div gt  x000D   x000D   lt  -- test links -- gt  x000D   x000D   lt p gt  x000D     lt a href   content-1  class  test-link  gt Image  Landscape  lt  a gt  x000D     lt a href   content-2  class  test-link  gt Image  Portrait  lt  a gt  x000D     lt a href   content-3  class  test-link  gt Text Content  Small  lt  a gt  x000D     lt a href   content-4  class  test-link  gt Text Content  Large  lt  a gt  x000D   lt  p gt  x000D   lt p gt If you are viewing in Stack Snippets  gt  Full page then reload the snippet so that window height is recalculated  Right click  gt  Reload frame   lt  p gt  x000D   x000D   lt  -- sample content -- gt  x000D   x000D   lt div id  content-1  style  display  none   gt  x000D     lt img src  https   i stack imgur com 5leq2 jpg  width  450  height  300  gt  x000D   lt  div gt  x000D   x000D   lt div id  content-2  style  display  none   gt  x000D     lt img src  https   i stack imgur com 9pVkn jpg  width  300  height  400  gt  x000D   lt  div gt  x000D   x000D   lt div id  content-3  style  display  none   gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Etiam sodales eu urna sit amet fermentum  Morbi ornare  leo ut ornare volutpat  nibh diam mattis elit  eget porta sapien quam eu mi  Nullam sollicitudin  nibh non suscipit commodo  nisi metus bibendum urna  vitae congue nisl risus eu tellus  Praesent diam ligula  hendrerit eget bibendum quis  convallis eu erat  Aliquam scelerisque turpis augue  sit amet dictum urna hendrerit id  Vestibulum luctus dolor quis ex sodales  nec aliquet lacus elementum  Mauris sollicitudin dictum augue eget posuere  Suspendisse diam elit  scelerisque eu quam vel  tempus sodales metus  Morbi et vehicula elit  In sit amet bibendum mi  lt  p gt  x000D   lt  div gt  x000D   x000D   lt div id  content-4  style  display  none   gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Etiam sodales eu urna sit amet fermentum  Morbi ornare  leo ut ornare volutpat  nibh diam mattis elit  eget porta sapien quam eu mi  Nullam sollicitudin  nibh non suscipit commodo  nisi metus bibendum urna  vitae congue nisl risus eu tellus  Praesent diam ligula  hendrerit eget bibendum quis  convallis eu erat  Aliquam scelerisque turpis augue  sit amet dictum urna hendrerit id  Vestibulum luctus dolor quis ex sodales  nec aliquet lacus elementum  Mauris sollicitudin dictum augue eget posuere  Suspendisse diam elit  scelerisque eu quam vel  tempus sodales metus  Morbi et vehicula elit  In sit amet bibendum mi  lt  p gt  x000D     lt p gt Aenean eu magna tempor  pellentesque arcu eget  mattis enim  Cras at volutpat mi  Aenean id placerat felis  quis imperdiet nunc  Aenean a iaculis est  quis lacinia nisl  Sed aliquet sem eget justo convallis congue  Quisque rhoncus nulla sit amet cursus maximus  Phasellus nec auctor urna  Nam mattis felis et diam finibus consectetur  Etiam finibus dignissim vestibulum  In eu urna mattis dui pharetra iaculis  Nam eleifend odio et massa imperdiet  et hendrerit mauris tempor  Quisque sapien lorem  dapibus ut ultricies ut  hendrerit in nulla  Nunc lobortis mi libero  nec tincidunt lacus pretium at  Aliquam erat volutpat  lt  p gt  x000D     lt p gt Fusce eleifend enim nec massa porttitor tempor a eget neque  Quisque vel augue ac urna posuere iaculis  Morbi pharetra augue ac interdum pulvinar  Duis vel posuere risus  Interdum et malesuada fames ac ante ipsum primis in faucibus  Ut vitae lectus non nisl iaculis volutpat nec vitae ante  Maecenas quis condimentum elit  Sed nisl urna  convallis ut pellentesque sit amet  pellentesque eget quam  Pellentesque ornare sapien ac scelerisque pretium  Pellentesque metus tortor  accumsan in vehicula iaculis  efficitur eget nisi  Donec tincidunt  felis vel viverra convallis  lectus lectus elementum magna  faucibus viverra risus nulla in dolor  lt  p gt  x000D     lt p gt Duis tristique sapien ut commodo laoreet  In vel sapien dui  Vestibulum non bibendum erat  Etiam iaculis vehicula accumsan  Phasellus finibus  elit et molestie luctus  massa arcu tempor nulla  id hendrerit metus mauris non mi  Morbi a ultricies magna  Proin condimentum suscipit urna eu maximus  Mauris condimentum massa ac egestas fermentum  Praesent faucibus a neque a molestie  Integer sed diam at eros accumsan convallis  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have the same problem and having position  absolute in your  ui-dialog   css was not enough   I noticed that position  relative was being set on the actual element s direct style  so the  ui-dialog css definition was getting overwritten   Setting position  absolute on the div I was going to make a dialog statically also did not work   In the end I changed two placed in my local jQuery to make this work   I changed the following line in jQuery to be   elem style position    absolute     at https   github com jquery jquery blob 1 8 0 src offset js L62  Also  since my dialog was set to draggable  I had to change this line as well in jQuery-ui to be   this element 0  style position    absolute     at https   github com jquery jquery-ui blob 1-8-stable ui jquery ui draggable js L48  Perhaps going through the style I have more thoroughly would fix things  but thought I d share how I got this working

User · Answer

For some reason I kept having this full page width problem with IE7 so I made this hack   var tag       lt div gt  lt  div gt       IE7 workaround var w  if  navigator appVersion indexOf  MSIE 7       -1      w   400  else     w    auto    tag html  My message   dialog       width  w      maxWidth  600

User · Answer

Here s how I did it   Responsive jQuery UI Dialog   and a fix for maxWidth bug    Fixing the maxWidth  amp  width  auto bug

User · Answer

If you need it to work in IE7  you can t use the undocumented  buggy  and unsupported   width   auto   option  Instead  add the following to your  dialog      open   function      this  dialog  option    width   this scrollWidth      Whether  scrollWidth includes the right-side padding depends on the browser  Firefox differs from Chrome   so you can either add a subjective  good enough  number of pixels to  scrollWidth  or replace it with your own width-calculation function   You might want to include width  0 among your  dialog   options  since this method will never decrease the width  only increase it   Tested to work in IE7  IE8  IE9  IE10  IE11  Firefox 30  Chrome 35  and Opera 22

User · Answer

Adding to Vladimir Kornea s answer  I wanted a way to set the width unless the screen was too small  then a dynamic width  Not truly  quot responsive quot  bit works well for most cases     open   function       var resposive width       window   width    gt  640    640       window   width   - 20        this  dialog  option    width   resposive width

User · Answer

All you need to do is just to add   width   65

User · Answer

I had this problem as well   I got it working with this    ui-dialog      display inline-block

User · Answer

I had the same problem when I upgraded jquery UI to 1 8 1 without upgrading the corresponding theme  Only is needed to upgrade the theme too and  auto  works again

[javascript] Automatically resize jQuery UI dialog to the width of the content loaded by ajax

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to jquery-ui

Examples related to jquery-ui-dialog