Skip to main content

Search and Top Navigation

#4820 closed bug (fixed)

Opened August 31, 2009 09:13PM UTC

Closed December 07, 2012 09:57PM UTC

Dialog: Auto height does not respect the maxHeight option.

Reported by: jamesbathgate Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.7.2
Keywords: Cc: julesbravo@gmail.com, laurenty@gmail.com
Blocked by: Blocking:
Description

If you have a very large dialog box with the height option set to 'auto', and the max height option defined, the height of the dialog box can exceed the max height.

Attachments (0)
Change History (12)

Changed September 01, 2009 01:01AM UTC by scottgonzalez comment:1

milestone: TBD1.8

Changed September 30, 2009 08:51PM UTC by Simon1979 comment:2

Does anybody have a workaround for this?

Changed September 30, 2009 09:04PM UTC by Simon1979 comment:3

Replying to [comment:2 Simon1979]:

Does anybody have a workaround for this?

Hmm.. actually I found a workaround for now: Wrapping the contents in a div with max-height set.

So instead of something like

$dialog.html(contents);

I now have

$dialog.html("<div style='max-height: 480px;'>" + contents + "</div>");

Probably not the best way but seems to work for what I'm trying to achieve

Changed January 08, 2010 09:13PM UTC by borgenk comment:4

Cheers Simon1979, fixed with almost the same solution:

$(".dialog").dialog({
    open: function(event, ui) {
        $(this).css({'max-height': 400, 'overflow-y': 'auto'}); 
    },
    ...........

Replying to [comment:3 Simon1979]:

Replying to [comment:2 Simon1979]: > Does anybody have a workaround for this? Hmm.. actually I found a workaround for now: Wrapping the contents in a div with max-height set. So instead of something like $dialog.html(contents); I now have $dialog.html("<div style='max-height: 480px;'>" + contents + "</div>"); Probably not the best way but seems to work for what I'm trying to achieve

Changed May 21, 2010 05:32PM UTC by probins comment:5

this currently half works, as maxHeight is being set on the resizable widget but not on the dialog box. This means it won't work on initial display, but will if you then resize the box. I've submitted a patch to set on the dialog box whether it's resizable or not http://github.com/probins/jquery-ui/blob/228369728e3471b12cb6d7b337c9b41490d9804c/ui/jquery.ui.dialog.js

Changed January 10, 2011 08:35PM UTC by drew.waddell comment:6

I am not sure if this is part of this bug and don't want to create a new ticket if it isn't necessary but you are able to set the height greater than the maxHeight on open of the dialog.

dialog. ( {
height : 400,
maxHeight : 200
} );

This will open the dialog to a height of 400 and will only respect maxHeight when the dialog is resized. If you are using dynamic variables for the height and maxHeight I believe when opening if the height is greater than the maxHeight that the maxHeight should be used instead.

Changed March 02, 2011 05:52PM UTC by tomjung comment:7

I'm not sure what the status is on this but I am still having the issue. I tried these two things:

$(".selector").dialog({autoOpen: false, modal: true, width: 700, maxHeight: 400});

$( ".selector" ).dialog( "option", "maxHeight", 400 );

Setting the height will work, but maxHeight still has issues.

Changed January 27, 2012 08:33PM UTC by kalou comment:8

UP! Works when the dialog window is resized, but not when the contents change.

Changed August 16, 2012 02:48PM UTC by vol7ron comment:9

Additionally you could apply your own CSS; something like:

$('#dialog')
   .dialog( { modal : true } )
   .css( { 'max-height' : '50px' } );

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:10

milestone: 1.9.01.10.0

Changed October 16, 2012 01:34PM UTC by tj.vantoll comment:11

status: newopen

This is still relevant in 1.9 - http://jsfiddle.net/tj_vantoll/yZ24j/.

Changed December 07, 2012 09:57PM UTC by Scott González comment:12

resolution: → fixed
status: openclosed

Dialog: Respect maxHeight when determining size on open. Fixes #4820 - Dialog: Auto height does not respect the maxHeight option.

Changeset: d4551bc3b8dfbfd925700dcb9f71e7729b125889