Setting max height of a dialog, then allow scrolling

jquery, jquery-ui, jquery-ui-dialog

Solution

$("#popup").dialog({
            modal: true,
            autoOpen: false
});

css

#popup {
 border: 1px solid #ccc;
 border-radius: 4px;
 padding: 10px;
 overflow: auto;
 max-height: 300px;   
}​

Working fiddle

Edit Updated fiddle and adjusted code so it would work. Not sure why, by the jQuery UI dialog `maxHeight` doesn't seem to be doing what it should. I just added the max height part to the CSS and all was fine and dandy.

Problem

I can't seem to understand how to set the height correctly for the jquery ui dialog. I want it to display the height to however much content is present, but if it exceeds 400 pixels, then I want a scroll bar. So, if the content has 200 pixels in height, then the dialog should have a height of 200 pixels. If the content has a height larger than 400 pixels, then the dialog shouldn't expand past 400 pixels and a scroll bar should be visible. I have this so far: ``` $("#popup").dialog({ modal: true, autoOpen: false }); ```

Original source

Related problems