CODEWITHSUNDEEP
htmlcsscss-transitions
Daniel Causebrook
Daniel Causebrook

Reputation: 479

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

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!

Upvotes: 0

Views: 895

Answers (1)

Daniel Causebrook
Daniel Causebrook

Reputation: 479

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.

Upvotes: 1

Related Questions