CSS dynamic textarea height on load

Issue

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 {

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

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

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/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answered By – Behnam Asaei

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published