Extending div's height beyond its max height from javascript

Question

I have a div in an user control, whose max height is set to 400px in css. This user control is used in many of aspx pages in my application.

I am trying to increase the div height to 500px dynamically in JavaScript for only one page, but it doesn't work. The div in user control always takes only the 400px (max height set in css) and not the height set by JavaScript.

Is there a way to change the div height over max height from JavaScript?

Thanks

Answer 1

You'll need to set the max-height property before you can set the height to be greater than it.

So, rather than this:

function setHeight()
{
    var e = document.getElementById("myDiv");
    e.style.height = "500px";
}

You'll do this:

function setHeight()
{
    var e = document.getElementById("myDiv");
    e.style.maxHeight = "500px";
    e.style.height = "500px";
}