Something about the height of the JQuery UI dialog

Previously I was talking about the JQuery UI dialog box modification. Today I’d like to show you how you can change the height of the dialog box.

Don’t worry, it’s going to be a simple bit of code you can figure out in a couple minutes.

If dialog height is not set definitively, it’s going to get the height of the content inside it, like in the following example.

In this bit of code, the height is not defined and therefore matches that of the content inside the dialog.

[[code]]czozMDpcIiQoIFwiI2RpYWxvZ19ib3hcIiApLmRpYWxvZygpOw0KXCI7e1smKiZdfQ==[[/code]]

Defining default height with the width argument is as simple as adding

[[code]]czoyMjpcIg0Kew0KIGhlaWdodDogNjAwDQp9DQpcIjt7WyYqJl19[[/code]]

between the round brackets of dialog();

You can add a default width value, too.

[[code]]czo2MzpcIiQoIFwiI2RpYWxvZ19ib3hcIiApLmRpYWxvZyh7DQogaGVpZ2h0OiA2MDAsDQogd2lkdGg6IDkwMA0KIH0pOw0KXCI7e1smKiZdfQ==[[/code]]

How to add a min or max height to the jquery ui dialog?

If you don’t know the height of the dialog box, but you want to set up a min-height, or max-height use a css code to do it.

[[code]]czozNTpcIg0KLnVpLWRpYWxvZ3ttaW4taGVpZ2h0IDogNDAwcHg7fQ0KXCI7e1smKiZdfQ==[[/code]]

[[code]]czozNTpcIg0KLnVpLWRpYWxvZ3ttYXgtaGVpZ2h0IDogNDAwcHg7fQ0KXCI7e1smKiZdfQ==[[/code]]

I hope I could help with the height argument of JQuery Dialog, any remaining questions are welcome below in the comment section.

About Ildiko Toth

I am a web developer with more than 3 years of experience using PHP, HTML and CSS . I started to experiment and work with Zend Framework and JQuery, too. I think the best way to learn something is to do it. I decided to do things, and share anything interesting I find along the way :)