When it comes to editing text, I utilize contenteditable divs on my website. The height of the div dynamically grows as I make changes, causing all other elements below it to shift downwards - which is exactly what I want. Once I've finished editing, I store the content on a server using Ajax and everything functions smoothly.
The issue arises when I reload the content from the server - the height of the contenteditable divs does not automatically adjust to display all of its content. Instead, it remains at its initial size.
This problem persists across all browsers. Does anyone have suggestions on how to address this issue?
EDIT
Here is the relevant HTML and JavaScript code for handling contenteditable:
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)"></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use the above JavaScript function to enable automatic growth of the contenteditable. Though, I'm uncertain if it's even needed, as the jsFiddle example provided by Abhitalks doesn't require one. Perhaps I should attempt removing it...
To save content to a server, I utilize the onblur attribute, which functions flawlessly.