jQueryUI dialog cropping content?

Question

Here is a fiddle which demonstrates the problem.

First I display a jQueryUI dialog with a fixed size. Then I enlarge it via an animation to a new fixed size. Then I add new content to the dialog. The new content is being cropped by the height of the original dialog window. Alas, my research on how to fix this is coming up blank.

$(function() {
  var dg = $("#dialog");
  dg.dialog( {
        height: 200,
        width: 80,
        modal: true,
        draggable: false,
        resizable: false,
        position: 'center'
  });

 dg.dialog("widget").animate({
        width: '400px',
        height: '400px'
    }, {
        duration: 500,
        step: function() {
            dg.dialog('option', 'position', 'center' );
        },
  complete: function( evt ) {
  //big --> font-size: 200px;
  dg.html( "<span class='big'>YA!</span>" );
  }
});

score 1 · Accepted Answer · answered Jan 10 '13 at 15:09

1

Setting the Width and Height of the underlying DOM element in the complete handler appears to fix the issue: http://jsfiddle.net/SyCu2/

e.g.

complete: function( evt ) {
      dg.width(400).height(400);
      dg.html( "<span class='big'>YA!</span>" );
      }

answered Jan 10 '13 at 15:09

Rob Willis

4,706
2
28
20

Okay, got it. But what about this? http://jsfiddle.net/cwu7A/ What is the correct size for the inner content? – jedierikb Jan 10 '13 at 16:36
1

You can read the correct height off of the Dom element. See http://jsfiddle.net/sh25K/ – Rob Willis Jan 10 '13 at 16:52

score 0 · Answer 2 · answered Jan 10 '13 at 15:01

0

Use minHeight instead of height. http://jsfiddle.net/kGJbj/

answered Jan 10 '13 at 15:01

Detect

2,049
1
12
21

jQueryUI dialog cropping content?

2 Answers2