I was looking to create a textarea with HTML elements inside it and came across this informative article.
My approach involved creating a div element with the attribute contenteditable="true".
#call-text-form {
height: calc(100vh - 350px);
width: calc(100% - 90px) !important;
}
#call-text-form-textarea {
margin-top: 5px;
height: calc(100vh - 405px);
width: 100% !important;
max-width: 100% !important;
overflow: auto;
}<div class="form-control center-horizontally" id="call-text-form">Test
<hr style="margin: 0 -12px">
<div contenteditable="true" id="call-text-form-textarea">f</div>
</div>However, I encountered an issue where the width of the div would expand proportionally to the entered text, causing layout problems. If the text exceeded the height, a scrollbar would appear instead of the div expanding vertically.
I attempted fixing the width to a set value like 50px, but that was not the ideal solution as I wanted the width to adjust dynamically based on content.
If anyone has any suggestions on how to address this problem effectively, I would greatly appreciate it.