0

I'm trying to create a textarea with some content inside and i need the height to be based on the content size.

cargarClases() {
  var containerGeneral = document.querySelector(".bimContainer").querySelector(".containerInfo--list").querySelector("nav").querySelector("ul");

  for (let i = 0; i < 15; i++) {

    var li = document.createElement('li');
    li.classList.add("classDesplegable");
    containerGeneral.appendChild(li);

    var image1 = document.createElement('img');
    image1.src = '../view/manageproject/img/FlechaBim.svg';
    li.appendChild(image1);

    var p = document.createElement('p');
    p.innerHTML = "Nombre de la clase";
    li.appendChild(p);


    var ul = document.createElement('ul');
    ul.classList.add("dNone");
    containerGeneral.appendChild(ul);

    for (let j = 0; j < 4; j++) {
      var li1 = document.createElement('li');
      ul.appendChild(li1);

      var p = document.createElement('p');
      p.innerHTML = "Nombre de la c...";
      p.classList.add("textClass");
      li1.appendChild(p);

      var p2 = document.createElement('p');
      p2.innerHTML = "Nombre de la c...";
      p2.classList.add("textClass2");
      li1.appendChild(p2);

      var textarea = document.createElement("textarea");                  

      function updateHeight(el) {
        el.style.height = '';
        el.style.height = el.scrollHeight + 'px';
      }

      updateHeight(textarea);

      textarea.addEventListener('input', () => updateHeight(textarea));


      textarea.maxLength = "44"
      textarea.innerHTML = "P1D30Tr0M0sC0WMul3P1D30Tr0M0sC0WMul3";

      if (i % 2 == 0) {
        //input.disabled = "true"; togliere commento quando sapremo quali classi possano essere editate e quali no
        textarea.classList.add("textArea");
        textarea.classList.add("line-clamp");
      } else {
        textarea.classList.add("textArea");
      }
      
      li1.appendChild(textarea);

      var check = document.createElement('input');
      check.type = 'checkbox';
      check.classList.add("inputCheck2");
      li1.appendChild(check);
    }
  }
}

This is what i've found on internet but it doesn't work. The height output is always 0px.

Any help is appreciated because i'm going crazy.

Have a nice day!

Edited so maybe it's easier to understand the problem

Matt Ellen
  • 11,268
  • 4
  • 68
  • 90
Dario
  • 13
  • 3
  • Maybe those help https://stackoverflow.com/questions/17772260/textarea-auto-height https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize – Burak Erdem Aug 09 '22 at 10:02
  • That code works to me. The only correction was having the textarea already existing in the dom instead of creating it via js. In that code you didn't add the textarea to the document after creating it, but that's not the issue you are encountering, because first of all the textarea isn't shown at all and having height output zero is way beyond that. – Diego D Aug 09 '22 at 10:05
  • @diegod unfortunately i need to create the element via js. Do you know some workaround that i can use? – Dario Aug 09 '22 at 10:10
  • your problem isn't perfectly clear. You said that the height output is always zero, but if you used that exact code, the real problem would be: I can't even see the textarea on the page. Did you add the textarea to the document body? After creating an element you need to attach it to any existing element in the page like: `document.querySelector('body').append(textarea);` – Diego D Aug 09 '22 at 10:13
  • @diegod I'm sorry. I'll add the entire code so that maybe my problem would be clearer. – Dario Aug 09 '22 at 10:17
  • Ok now it's clear. You just need to call `updateHeight(textarea);` after `li1.appendChild(textarea);` because its `scrollHeight` property value will depend on its container. Of course `cargarClases()` should be `function cargarClases()` and should be called – Diego D Aug 09 '22 at 10:43

0 Answers0