Ticket #4846 (closed bug: fixed)

Opened 5 years ago

Last modified 4 years ago

Setting Dialog height shorter after init hides button pane

Reported by: redjag Owned by:
Priority: major Milestone: 1.8.3
Component: ui.dialog Version: 1.7.2
Keywords: dialog height button Cc:
Blocking: Blocked by:

Description

I am creating a dialog window with a couple buttons in the button pane at init time. Reducing the height after init using jQuery('#dialogWindow').dialog('option','height',200) shortens the window without shortening the container, leaving the button pane outside the dialog window and inaccessible. After doing this manual resize, trying to use the mouse to make the window taller fails to bring the button pane back in to view as the resize code seems to maintain the distance created by manually resizing. If I manually increase the height by the amount it was reduced, the button pane comes back in to view.

Change History

comment:1 Changed 5 years ago by nminale

I also have the same problem.

When I change width and/or height of the dialog after it's created by calling $('#dialogWindow').dialog('option','height',200); $('#dialogWindow').dialog('option','width',200); The size of the dialog is changed, but the content's and button pane's are not. So, you will see no button pane at all if the new height is smaller or you will see it stuck in the middle if the new height is bigger.

So my fix for now is that I modified the _setData function -- case "width" and "height" to recalculate the size of all components inside the dialog. ... case "width":

this.uiDialog.width(value); this.options.width = value; this._size(); break;

case "height":

this.uiDialog.height(value); this.options.height = value; this._size(); break;

...

Just in case this helps someone else with the same problem while waiting for the official fix :)

comment:2 Changed 5 years ago by nminale

Uh. Forgot to set formatting. Here is the code again.

... 
case "width":

    this.uiDialog.width(value); 
    this.options.width = value; 
    this._size(); break;
case "height":
    this.uiDialog.height(value); 
    this.options.height = value; 
    this._size(); break;

...

Thanks.

comment:3 Changed 4 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.8

comment:4 Changed 4 years ago by dcramer

In addition to this. If you create a dialog without buttons, then add a button by calling

$("#dialogWindow").dialog('option', 'buttons', {
  'Close': function() {
    $(this).dialog("close");
  }
});

You can drag resize past the buttons pane and acts as if the buttons pane is part of the content.

comment:5 Changed 4 years ago by bostanio

Turns out this bug is fixed in 1.9. However, there is one remaining issue that the height is not calculated correctly if buttons are added or removed. Fix for that submitted to be pulled from this commit

 http://github.com/bostanio/jquery-ui/commit/7dbff1bfbfe34234f33b71b3b107551a3cebe242

comment:6 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in  f560862. Thanks bostanio.

comment:7 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.3
Note: See TracTickets for help on using tickets.