Home / Questions / 348567
Accepted
DAD
Asked: 2020-04-23 18:59:03 +0800 CST 2020-04-23 18:59:03 +0800 CST

Auto adjust the textarea according to the content

  • 772

I have an element textarea, which receives information from a Database. The text can vary, it can be 2, 3, 4...n rows of text, so I would like that when the information obtained in the textarea, it adjusts automatically and show all the text.

Code:

<table class="table table-sm mb4">
<thead>
    <tr>
        <th width="22%">Nombre </th>
        <th width="22%">Tipo </th>
        <th width="23%">Beneficios</th>
        <th width="23%">Descripcion de elementos involucrados</th>
    </tr>
</thead>
<tbody>
    @foreach ($referencia as $item)
    <tr>
        <td><textarea name="nombre[]" placeholder="... ... ...">{{$item->nombre}}</textarea></td>
        <td><textarea name="tipo[]" placeholder="... ... ...">{{$item->tipo}}</textarea></td>
        <td><textarea name="beneficio[]" placeholder="... ... ...">{{$item->beneficio}}</textarea></td>
        <td><textarea name="descipcion[]" placeholder="... ... ...">{{$item->descipcion}}</textarea></td> 
    </tr>
    @endforeach 
</tbody>

enter image description here

This is data that I entered randomly, but the first row actually has more text and as you can see it is only showing a part of it.

Objective:

This is how I would like the text to be displayed, automatically. enter image description here

javascript

3 Answers

  1. Best Answer

    It is not necessary to set a width on the columns of your table, since this makes them wider but your container boxes will remain the same size and with the text partially hidden.

    We start from the fact that each textareacan have a variable length content, therefore a fixed average does not help us, so we can use:

    • scrollHeightwhich according to La Mozilla Developer is the total measure of the content in an element considering what is not displayed due to the effect of overflowhiding a part of it.

    So we do:

    • We get all the textareaand store them in a variable
    • We iterate with a cycle the elements that this variable stores
    • We are going to give each element that is the product of the iteration that is representing the different textarea aheight
    • The heightassignee will be delimited by scrollHeightwhat will be the total height that the content itself (in this case the text) gives to its parent box or container box
    • For all of the above to work we attach this to an event of the window object and in the anonymous function we add everything already exposed
    • Since we are making all the content visible then we can disable the textarea's resize property by setting this property tonone

          <style>
        .cajas-texto {
          border-radius: 4px;
          margin: 10px;
          overflow: hidden;
          resize: none;
        }
      </style>
    
    <section class="tarjetas">
      <textarea class="cajas-texto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore dicta perferendis labore omnis, aliquid, cumque ex, deleniti sapiente distinctio necessitatibus libero adipisci. Quidem qui accusantium, maiores tenetur nobis fugiat voluptates.
      </textarea>
      <textarea class="cajas-texto">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni similique totam exercitationem, minima sequi libero. Neque non pariatur quo illum quis, modi quidem tempore nobis ratione explicabo natus aliquid!</span><span>Doloremque earum magni repellat, temporibus obcaecati itaque esse commodi iure modi! Minus distinctio, numquam reiciendis et vel sint non natus, eveniet incidunt. Aut ex numquam qui, illum a facere culpa.</span>
      </textarea>
      <textarea class="cajas-texto">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Illum voluptas, error minima, veniam fugit, illo sapiente 
    
      </textarea>
    </section>
    <script>
        let area = document.querySelectorAll(".cajas-texto")
        
        window.addEventListener("DOMContentLoaded", () => {
          area.forEach((elemento) => {
            elemento.style.height = `${elemento.scrollHeight}px`
          })
        })    
    </script>

    Visually with a result like this:

    enter image description here

    • 3

  2. With this simple code it is solved, every time a line break is made in textarea the style will be registered to the textarea

    $("textarea").keyup(function(){  
  var height = $(this).prop("scrollHeight")+2+"px";
  $(this).css({"height":height});
})
    • 2

  3. One way to achieve this is to calculate with javascriptthe sum of the height of the textareaand the scrolland apply this result to the height of the element.

    For the example, a class has been added autoheightto the elements textareawhere it will be applied. In the example it has been assumed that it is not known which is going to be the tallest element in the row, so they go through all the elements with the class autoheightand the tallest value is collected to apply it to all and that they have the same height. The different heights are displayed on the console.

    var newheight = 0;
$(".autoheight").each(function(){ 
   var h = $(this).height();
   var s = $(this).prop("scrollHeight");
   console.log(h + "-" + s);
   if ( (h+s) > newheight )  {
      newheight = h + s;      
   }
});
$(".autoheight").height(newheight);
    textarea{  
  overflow:hidden;
  display:block;
  height:auto;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm mb4">
<thead>
    <tr>
        <th width="22%">Nombre </th>
        <th width="22%">Tipo </th>
        <th width="23%">Beneficios</th>
        <th width="23%">Descripcion de elementos involucrados</th>
    </tr>
</thead>
<tbody>
    
    <tr>
        <td><textarea class="autoheight" name="nombre[]" placeholder="... ... ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea></td>
        <td><textarea class="autoheight" name="tipo[]" placeholder="... ... ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea></td>
        <td><textarea class="autoheight" name="beneficio[]" placeholder="... ... ..."></textarea></td>
        <td><textarea class="autoheight" name="descipcion[]" placeholder="... ... ..."></textarea></td> 
    </tr>
    
</tbody>

    • 1