Problem when leaving the width of the automatic textarea

Asked

Viewed 412 times

1

Save everyone, I’m having trouble letting the width of a textarea track the line size, since its initial size does not currently expand.

My goal is to let the textarea only increase width as the user writes.

Follow the current code:

HTML:

<html>
<body>
<div class="container">
  <div class="row">
    <div class="col">
           <p>&nbsp;
        <textarea name="textarea" wrap="wrap" id="the_textarea" rows='1' class="textarea-cliente" placeholder="nome"></textarea>, esta textarea deveria expandir APENAS sua largura para acompanhar o tamanho do texto inserido dentro dela.
      </p>
    </div>
  </div>
</div>
</body>

CSS:

textarea {
    resize: none;
    height: 30px;
    overflow: hidden;
    margin: -6px;
    border: none;
}

.textarea-cliente {
    min-width: 25%;
    height: 24px;
    width: auto;
}

I would like a light on this problem. From now on, thank you for understanding.

javascript html css bootstrap-4

  • The html is broken, in the textarea div, in case what you want I did not understand well.

  • Dude you put a textarea within a paragraph? I don’t understand... Your HTML structure seems a little wrong... and you’re using the class col-7 this will leave will not let the element stay with 100% of the width of the screen, if that’s what you want, because it did not give to understand well....

  • @Bulfaitelo Updated, I apologize for the problem.

  • @hugocsl Structure redone, sorry for the error. Yes, had placed textarea within a paragraph. I was not aware of this limitation of col-7, since I used it only to increase its width.

  • yes but your problem you want the textarea to expand as written or as the page size ?

  • You need to structure your grid correctly using .container > .row > .col (Docs). You also don’t seem to be wearing the form structures correctly (.form-group > textarea.form-control).

  • @Bulfaitelo As you write.

  • both width and height ?

  • @Bulfaitelo Only width

  • In fact what you want is that as the user type the <textarea> will go growing automatically is that it? Or you that a <textarea> already 100% of the width?

  • @hugocsl Yes, let the <textarea> grow automatically.

  • 1

    This is not possible. vc need to determine a size for it, be it 10% of the width of the screen or 100% of the width. It will not grow horizontally as you type, this is not a behavior that can be included in a <textarea> with CSS

  • @hugocsl I understand, I will try to find other alternatives for such a solution. Thank you for the information!

  • 2

    @Nithogg really I never saw, what I would recommend would be, let him 100% the div limit him, and make a self recycle down

  • 1

    @Nithogg something like this here http://www.jacklmoore.com/autosize/

  • 1

    @Bulfaitelo Based on this information, I will look for a different or similar solution, as your suggestion, but thank you for the information.

Show 11 more comments

2 answers

3


With Javascript you can check if the scroll width is larger than the element width and thus adjust the width dynamically as you type:

document.getElementById('the_textarea').addEventListener('input', function(){
   
   var largura = this.offsetWidth; // largura do textarea
   var hscroll = this.scrollWidth; // largura do scroll
   
     if(hscroll > largura){
        this.style.width = hscroll+"px";
     }else if(!this.value){
        this.style.width = "auto";
     }

});
textarea {
    resize: none;
    height: 30px;
    overflow: hidden;
    margin: -6px;
    border: none;
}

.textarea-cliente {
    min-width: 25%;
    height: 24px;
    width: auto;
}
<div class="container">
  <div class="row">
    <div class="col">
           <p>&nbsp;
        <textarea name="textarea" wrap="off" id="the_textarea" rows='1' class="textarea-cliente" placeholder="nome"></textarea>, esta textarea deveria expandir APENAS sua largura para acompanhar o tamanho do texto inserido dentro dela.
      </p>
    </div>
  </div>
</div>

The only thing I could not do was make the textarea decrease in size if the key is used Backspace, but I put a else if which returns to normal size if the textarea becomes empty.

  • Wow, I thought I would have to change my strategy on the page, thank you very much, it will be very useful!

0

I think this might help you!

 var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}
<!doctype html>
<html><head>
    <style>
		textarea{width: 100%;overflow-y: hidden;}     
    </style>
    </head>
<body>
    <textarea placeholder="Escreva seu texto aqui..."></textarea>
</body></html>

  • 1

    The question is to increase the width, not the height.

  • I understand Sam, but if he needs the height he can use my code

  • Thank you @Cleber, in the future I intend to use this height mechanics as well!

Browser other questions tagged javascript html css bootstrap-4

You are not signed in. Login or sign up in order to post.