Setting max height of a dialog, then allow scrolling
Asked Answered
N

1

5

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

});
Nickelplate answered 25/6, 2012 at 16:37 Comment(0)
I
10
$("#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.

Imitative answered 25/6, 2012 at 16:42 Comment(7)
I tried setting maxHeight, but it doesn't seem to work. The dialog is still very tall, it didn't do anything actually (i cleard the browser cache also, in firefox/chrome/ie).Nickelplate
Can you add some example code of what is being loaded into the dialog? Maybe post a jsfiddle? I got you started. jsfiddle.net/JNKPBImitative
The css styles/images aren't working on fiddle, anyhow, I have 1 or more rows of this: <div class="dialog-item"> <form name="form1"> Here is some text for the dialog, hello world! <div class="dialog-item-inputs"> <a href="#">Click here</a> </div> </form> </div> Nickelplate
So the solution is based on CSS and not the dialog attribute right?Nickelplate
Yes, I took the maxHeight out of the .dialog() all together as it certainly wasn't stopping it from getting bigger.Imitative
also see this for doing it in the initialiser #5662413Unlade
In order to specify a runtime max-height for your dialog/pop-up, see my answer here: https://mcmap.net/q/505479/-jquery-ui-dialog-vertical-scroll-works-not-correct-if-dialog-height-more-than-window-height; similar to the solutions at @Unlade 's linkGeodynamics

© 2022 - 2024 — McMap. All rights reserved.