Omid Omid -4 years ago 336
CSS Question

JQuery css max-height not working

I've tested this code for set

.css('max-height','auto')
css property in JQuery but it's not working, and when I set a dimension like
.css('max-height','93px')
it's working fine, how can I set it as
auto
?

HTML:

<div class="holder">
<div>DIVISION</div>
<div>DIVISION</div>
<div>DIVISION</div>
<div>DIVISION</div>
<div>DIVISION</div>
<div>DIVISION</div>
<div>DIVISION</div>
</div>
<br />
<input type="button" onclick="test();" value="CHECK" />


CSS:

.holder{
max-height:40px;
background:red;
padding:10px;
overflow:hidden;
}
.holder div{
background:blue;
margin:3px 0;
}


js:

function test(){
var hldr=$('.holder'); //get element

alert('before set: ' + $('.holder').css('max-height')); //alert before set

/* SET */
hldr.css('max-height','auto');

alert('after set: ' + $('.holder').css('max-height'));//alert after set
}


http://jsfiddle.net/silverlight/23UCV/2/

Answer Source

Changing max-height to height fixes your problem.

Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download