Search code examples
htmlcsstextarea

Can I make a textarea grow with text to a max height?

I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible?

Solution

  • You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

    HTML

    <div contenteditable>
    type here...
</div>

    CSS

    div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}