CSS dynamic textarea height on load

June 10, 2022

I got a CSS problem, regarding the container or/and textarea height. The generated divs and textareas should dynamically set the height. Unfortunately this does not worked out like I expected. How can I change the CSS, so the appended textarea would exactly huge enough to fit the content. I do not want a overflow scrollbar.

https://jsfiddle.net/j4s81hpa/

data = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book." 

$("#flow-desc").html("")
            for (var i = 0; i < 4; i++) {
          $("#flow-desc").append('<div class="notes-container" id='+ i +'><textarea class="notes-textfield col-10" placeholder="#Notiz">'+ data +'</textarea></div>')               
      }

    .flow-div {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 33.33%;
        background: whitesmoke;
        opacity: 1;
    }

    .wrapper {
        position: relative;
        margin: 20px;
        height: fit-content;
        background: white;
        border-radius: 10px;
        box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
            15px 15px 15px rgba(70, 70, 70, 0.12);
        padding: 10px;
        overflow-y: auto;
    }

    .notes-container {
        position: relative;
        margin: 20px;
        height: fit-content;
    }

    .notes-textfield {
        position: relative;
        border-radius: 10px;
        padding: 10px 10px 0 10px;
        border: none;
        resize: none;
        overflow: hidden;
        height: fit-content;
        border-bottom: 2px solid rgb(0, 50, 115, 0.25);
        width: calc(100% - 20px);
    }

    #flow-desc {
        
    }

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="flow-div">
        <div class="wrapper">
                <div id="flow-desc">
                    <!-- 
                        .. filled by script .. 
                    -->
                </div>
        </div>
    </div>

</body>

</html>

>Solution :

you can add this code js:

 data =
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book.";

      $("#flow-desc").html("");
      for (var i = 0; i < 4; i++) {
        $("#flow-desc").append(
          '<div class="notes-container" id=' +
            i +
            '><textarea class="notes-textfield col-10" placeholder="#Notiz">' +
            data +
            "</textarea></div>"
        );
      }

      $("textarea")
        .each(function () {
          this.setAttribute(
            "style",
            "height:" + this.scrollHeight + "px;overflow-y:hidden;"
          );
        })
        .on("input", function () {
          this.style.height = "auto";
          this.style.height = this.scrollHeight + "px";
        });

.flow-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33.33%;
  background: whitesmoke;
  opacity: 1;
}

.wrapper {
  position: relative;
  margin: 20px;
  height: fit-content;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
    15px 15px 15px rgba(70, 70, 70, 0.12);
  padding: 10px;
  overflow-y: auto;
}

.notes-container {
  position: relative;
  margin: 20px;
  height: fit-content;
}

.notes-textfield {
  position: relative;
  border-radius: 10px;
  padding: 10px 10px 0 10px;
  border: none;
  resize: none;
  overflow: hidden;
  height: fit-content;
  border-bottom: 2px solid rgb(0, 50, 115, 0.25);
  width: calc(100% - 20px);
}

#flow-desc {
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
      integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
</head>

  <style></style>

  <body>
    <div class="flow-div">
      <div class="wrapper">
        <div id="flow-desc">
          <!-- 
                      .. filled by script .. 
                  -->
        </div>
      </div>
    </div>

  </body>
</html>