Ticket #4820 (closed bug: fixed)

Opened 5 years ago

Last modified 21 months ago

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@…, laurenty@…
Blocking: Blocked by:

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.

Change History

comment:1 Changed 5 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.8

comment:2 follow-up: ↓ 3 Changed 5 years ago by Simon1979

Does anybody have a workaround for this?

comment:3 in reply to: ↑ 2 ; follow-up: ↓ 4 Changed 5 years ago by Simon1979

Replying to 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

comment:4 in reply to: ↑ 3 Changed 5 years ago by borgenk

Cheers Simon1979, fixed with almost the same solution:

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

Replying to Simon1979:

Replying to 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

comment:5 Changed 4 years ago by probins

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

comment:6 Changed 4 years ago by drew.waddell

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.

comment:7 Changed 3 years ago by tomjung

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.

comment:8 Changed 3 years ago by kalou

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

comment:9 Changed 2 years ago by vol7ron

Additionally you could apply your own CSS; something like:

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

comment:10 Changed 23 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:11 Changed 23 months ago by tj.vantoll

  • Status changed from new to open

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

comment:12 Changed 21 months ago by Scott González

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

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

Changeset: d4551bc3b8dfbfd925700dcb9f71e7729b125889

Note: See TracTickets for help on using tickets.