0

I have a DIV with a default fixed height and an overflow:hidden property to hide content that is to broad to be contained inside it.

div
{
  height:50px;
  overflow:hidden;
}

I would like to autoexpand this DIV hovering it with mouse but I have the problem that CSS transition works only with a fixed height and not with an auto height.

Here a JsFiddle that illustrate two cases.

I know that reason is that for some reason browrse does not know "how many px are auto height" but is there exist a workaround (maybe using max-height property...) to avoid need of jQuery?

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77

1 Answers1

0

When you give height: auto in the animation, it doesn't know what to do. As it cannot calculate the height on the fly. So, initialize the height using jQuery this way:

$(function () {
  $(".auto_height").each(function () {
    $(this).data("height", $(this).height());
  });
});

And in CSS, give:

height: attr(data-height);
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Thank you, even if I asked for a solution WO jQuery. Anyway, is an interesting solution, I have thought about adding "height:XX px" as an inline style, rather than populating a data-attribute. Can you explain me why using this instead an inline style should be better? – Luca Detomi Aug 12 '15 at 14:22
  • That's what I said. What you are doing is an interactive event, should be handled only by event managing script, which is JavaScript. – Praveen Kumar Purushothaman Aug 12 '15 at 14:23
  • No, I wanted to say.... I understood why you use jQuery to calculate the height, buy I don't have clear why assigning it to a data-attribute instead as inline style `$(this).css("height", $(this).height());` – Luca Detomi Aug 12 '15 at 14:30
  • Well, I am not sure why I used it, but it works. LoL... – Praveen Kumar Purushothaman Aug 12 '15 at 14:40