JQuery css max-height not working

Question

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/

There is no max-height:auto developer.mozilla.org/en-US/docs/Web/CSS/max-height. Just use height:auto... — loveNoHate
– loveNoHate, Commented Mar 11, 2014 at 22:31

Ramkee · Accepted Answer · 2017-03-13 13:15:21Z

15

I have also faced the same problem.

I have tried the maxHeight property. Now the problem has been resolved

$('#exampleId').css({"maxHeight":"100px"});

answered Mar 13, 2017 at 13:15

Ramkee

9361 gold badge10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omri Aharon · Accepted Answer · 2014-03-11 22:30:33Z

2

Changing max-height to height fixes your problem.

Demo

answered Mar 11, 2014 at 22:30

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Comments

pipepiper · Accepted Answer · 2017-02-27 23:07:31Z

0

Not sure if earlier browsers had this issue. Tested recently in Chrome 56.x, FF 51.0.x and IE 11, you can use:

max-height: none;

so this works

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

One can use this as well with jquery (tested with 2.0.3) and create a toggle

$('#someid').toggleClass("expand");

and css

.expand{
   max-height: none !important;
}

answered Feb 27, 2017 at 23:07

pipepiper

3882 silver badges5 bronze badges

1 Comment

JHM16 Over a year ago

how is it different than other answers

Collectives™ on Stack Overflow

JQuery css max-height not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related