How to make my input element height dynamic?

Question

I have an input element which renders the value from the database and does live edit of the input values with Ajax call. The problem is when I put text longer than the input element width, instead of showing the text on a new line the text remains on the same line. I was trying to make a dynamic input element which can adjust it's height according to the value render from the Database.

My current output:

My current output of the input element

My input element code:

<input class="topic-dynamic" style="height:100%; margin-top:60px; font-size:3em; letter-spacing:-0.04; text-align:left; font-weight:600;" value="'.$topic.'" onkeypress="updateThedynamicContent()">

Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — Igor Alemasow, Mar 24 '18 at 14:11
To wrap the long text, you need to use `` instead of `<input/>`. There is no way to adjust the size of any HTML control according to its text content using CSS. You'll need to do so in JavaScript. Alternatively, you can use a `<div>` which can do all the above, but you will need make it editable.</div> — Racil Hilan, Mar 24 '18 at 14:11
@IgorAlemasow it's not textarea. Please read the question carefully before commenting and making it duplicate. — Michael Chuuuuuuuuuuuuuuuuuuuu, Mar 24 '18 at 14:14

score 0 · Accepted Answer · answered Mar 24 '18 at 14:22

To wrap the long text, you need to use <textarea> instead of <input>. There is no way to adjust the size of any HTML control according to its text content using CSS, you'll need to do so in JavaScript.

Alternatively, you can use a <span> which can do all the above (wrap the text and adjust its size automatically), but you will need make it editable by adding the contenteditable="true" property.

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

The only issue with this approach is that if you want to submit the value as part of the form, you'll have to do so by yourself in JavaScript, because only HTML controls are considered part of the form. Doing so is relatively easy. For example, you can add a hidden field and in the onsubmit event of the form assign the value of the span to the hidden field which will be then automatically submitted with the form.

How to make my input element height dynamic?

1 Answers1