How can I make the height of a div transition smoothly with content and width?

Question

I have a div that functions as an information box, giving extra information on the item it is associated with. Now this div might contain any amount of content, so I cannot fix the height in the css. This would be fine, but I would also like this div to have a nice transition when the user opens it, and this is where I run into a problem. I have all the transitions working correctly, and they are here (+ open/closed css)

#info.hidden {
  opacity:0;
  width:0px;
  height:10px;

  transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out, visibility 0s linear .5s;
  /* with -moz- & -webkit- */
}

#info.visible {
  width:150px;

  transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
  /* with -moz- & -webkit- */
}

The problem I have is that the small width during the transition causes the text to wrap, extending the height of the box and not having the desired effect. Ideally, the height would expand smoothly from 10px to the height of the text, but instead it follows the bottom of the text all the way through the transition. Also on close the height jumps straight to 10px.

This problem can be seen here: http://jsfiddle.net/Daniel300/1nhs9w78/.

I have tried various things, including adding a wrapper div to the text, hoping that the wrapper div would overflow past the bottom (or the side) of the div during the transition. I also messed about with the display and overflow properties, but nothing seemed to work.

Thanks for any help!

quick ques: you couldn't use `classList` API instead of manipulating `className` with RegEx? worried about browser compatibility? — Tahir Ahmed, Jul 17 '15 at 12:30
@TahirAhmed If I'm honest, I wasn't aware of classList. I learn css, html and js as I go, so there is probably a lot of helpful features I have missed... However, it is likely that some people may use IE 9 or below so atm I will stick to regex. It works well enough. — Daniel Causebrook, Jul 17 '15 at 12:36
@AhsN I have never tried using jQuery. Therefore I just stuck to what I knew for this project at least. I understand that it's easier and all that, but it's just what I decided to do. I'm open to a solution involving js or jQuery, but if it can be done in CSS it's (probably) just nicer. — Daniel Causebrook, Jul 17 '15 at 12:47
@Dan300 [This is how](http://jsfiddle.net/1nhs9w78/3/) it looks with JQuery. Two buttons having two different in-built animations. — Ahs N, Jul 17 '15 at 12:48
@AhsN Hmm, the slide button demonstrates the component of the transition I can't get to work, but I can't combine it with other transitions. The fade I can do in CSS. — Daniel Causebrook, Jul 17 '15 at 13:07

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I found a way to do this that is not quite a valid solution, but is a workaround. It seems to be the best I can do for now.

Firstly, adding white-space: nowrap; to the div prevented the text from, well, wrapping, and extending the div.

Secondly, I found this post which I saw before but I thought that it didn't work (possibly I set the value too high). Essentially, you can't transition from fixed value to auto (which is what I was trying to do). Therefore you must instead transition the max-height up to a value it will never reach. Obviously I can't strictly speaking do this as per my question, but I can set it to a reasonable maximum value.

Here is my new code: https://jsfiddle.net/Daniel300/mfegxzuc/.

Not perfect, but possibly as good as I'm going to get with CSS.

How can I make the height of a div transition smoothly with content and width?

1 Answers1