CODEWITHSUNDEEP
cssheightwidthtransition
Mintz
Mintz

Reputation: 969

Css div height/width transition for dynamic content

<div>Text here</div>

Let say I have a div with a textfield in it and I want the div to smoothly make Height/Width transition as I type in more text and make linebreaks. Is there any simple way to do this transition with css without Javascript involved?

How would the text be edited? Javascript or AJAX call.

Upvotes: 0

Views: 2678

Answers (2)

the mad zergling
the mad zergling

Reputation: 282

Clever solution, albeit with caveats:

  1. you must know a height you can set at the beginning (0 will work)
  2. not exactly the cleanest.

use max-height, not height. start with something small, whatever the default height of the div's content is, then set it to something rather high, as it will only expand to match your content. you will probably also want overflow: hidden so you can actually see the masking as it transitions.

.test{
  overflow: hidden;
  transition: 1s linear;
}
.test.begin{
  max-height: 15px;
}
.test.end{
  max-height: 400px;
}

note that the animation speed is based off of the difference between the max heights. even if you are only animating over 100px of content in 1 sec, the speed of the reveal will be as if you were animating over 385px in 1 second.

edit: I havent had my morning coffee yet, but are you sure you don't want a, you know... 

<textarea>

?

Upvotes: 1

mwcz
mwcz

Reputation: 9301

The easiest way to get a box that expands as you type is with the contenteditable attribute.

<div contenteditable>Type here...</div>

Here is a demonstration.

I don't think a smooth, gradual transition effect can be achieved as text is typed into the contenteditable element, though. Transitioning on dynamic element heights is already quite difficult due to the lack of browser support for transitioning height: auto and percentage heights.

Sadly the transition effect you're looking for will most likely require JavaScript, unless someone comes up with a very clever CSS solution.

Upvotes: 0

Related Questions