Unable to reduce height when deleting text in dynamic texas

Question

<div class="mainContainer"> <div class="container"> <div class="content"></div> </div> <div class="footerCls"> <div class="inputcls"> <textarea name="text" placeholder="Text goes here..." onkeydown="expand(event,this)" onkeyup="expand(event,this)"></textarea> <div class="wc-commands" id="wc-commands"> <svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 22 22" version="1.1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-263.000000, -18.000000)"> <g> <g transform="translate(264.000000, 19.000000)"> <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Shape" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <circle id="Oval-2" fill="#D2D2D2" cx="10" cy="15" r="1"></circle> <circle id="Oval" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle> </g> </g> </g> </g> </svg> </div> <div class="wc-send" id="wc-send"> <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="20px" viewBox="0 0 24 20" version="1.1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g transform="translate(-320.000000, -19.000000)" stroke="#FFFFFF" stroke-width="2"> <g> <g transform="translate(321.000000, 20.000000)"> <polygon points="22 0 19 18 10 12 0 9"></polygon> <path d="M9.5,11.5 L21.5,0.5"></path> <polyline points="10 12 10 18 14 15"></polyline> </g> </g> </g> </g> </svg> </div> </div> </div> </div> <script> function expand(e, element) { var code = (e.keyCode ? e.keyCode : e.which); var element2 = document.getElementsByClassName("footerCls")[0]; if (code != 13) { if (element.scrollHeight < 84) { element2.style.height = (element.scrollHeight) + "px"; element.style.height = (element.scrollHeight) + "px"; element.style.overflowY = "hidden"; } else { element2.style.height = "125px"; element.style.height = "84px"; element.style.overflowY = "scroll"; } } else { element2.style.height = "56px"; element.style.height = "30px"; element.value = ""; element.style.overflowY = "hidden"; } } </script> 

I have textarea where it increases as you add text. It will reach a certain height (up to 4 lines), and then a scroll will appear. I can not reduce the height when deleting text.

Also, I cannot set single text by default.

Fiddle

Below is the image I'm trying to achieve

Answer 1

To achieve this in the easiest way, you need to make small changes.

• Remove position: absolute; with .inputcls and .inputcls textarea . At the same time, their wrapper will be automatically changed when changing textarea , and you do not have to do this with code.

• Instead of setting the minimum height of the textarea using pixels, use the rows property to set the minimum number of lines you want.

   <textarea rows="2"></textarea> 

• When changing text, the height is set to auto . He will adjust the height of the textarea to the original height that he should have. Then you can get it scrollHeight and set it again. So actually your function should be simple:

   function expand(e, element) { element.style.height = "auto"; if (element.scrollHeight <= 84) { element.style.height = element.scrollHeight + "px"; element.style.overflowY = "hidden"; } else { element.style.height = "84px"; element.style.overflowY = "scroll"; } } 

See updated JSFiddle

BTW

You wrote:

Also, I cannot set single text by default.

With this solution, just change rows="2" to rows="1"

BTW2

You do not need to use both onkeydown and onkeyup . Using only onkeyup would be better.

Answer 2

You will need to make the following change:

 <script> function expand(e, element) { var code = (e.keyCode ? e.keyCode : e.which); var element2 = document.getElementsByClassName("footerCls")[0]; if (code != 13) { if (element.scrollHeight < 84) { element2.style.height = (element.scrollHeight) + "px"; element.style.height = (element.scrollHeight) + "px"; element.style.overflowY = "hidden"; } else { element2.style.height = "125px"; **element.style.height = "84px";** element.style.overflowY = "scroll"; } } else { element2.style.height = "56px"; element.style.height = "30px"; element.value = ""; element.style.overflowY = "hidden"; } } </script> 

from:

 element.style.height = "84px"; 

to

 element.style.maxHeight = "84px"; 

Answer 3

It looks like all you have to do is change the min-height: 56px in your footerCls class to something like, for example: min-height: 100px seems to display the element more.