How to force textarea to be vertically resizeable using CSS?

Question

I have a textarea element and I would like it to have a default height (e.g. 340px) but to be vertically resizeable up to 70% of the browser window's height (when I enter a lot of text, e.g. coping & pasting this question should make it vertically bigger).

I tried to set resize: vertical parameter in CSS and to use max-height as below, but it still doesn't resize.

What am I doing wrong and how can I fix it?

#content {
    position: relative;
    top: 0px;
/*
    max-width: 320px;
*/
    margin: 0 0 0 0;
    line-height: 1.6em;
    z-index: 1;
    height: 100%;
}

#statements {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 0px;
    max-height: 70%;
    background-color: rgba(255, 255, 255, 0);
    max-width: 340px;
    padding-left: 50px;
    z-index: 10;
    overflow: hidden;
/*    pointer-events: none;*/
}

#entryform {
    position: relative;
    background-color: var(--entry-form-background);
    width: 340px;
    border-radius: 8px;
    border-top-left-radius: 0px!important;
    padding-top: 10px;
    height: 100%;
    padding-bottom: 20px;
    padding-left: 10px;
    margin-left: -10px;
    margin-bottom: 0px;
    z-index: 10!important;
    display: block;
}

textarea {
    font: 16px 'IstokWeb-Bold',sans-serif;
    position: relative;
    resize: vertical;
    width: 92%;
    max-height: 100%;
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
    padding: 0.5em 0.6em;
    display: block;
    margin: 0.25em 0;
    border: 1px solid #e6e6e6;
    box-shadow: inset 0 1px 3px #e6e6e6;
    border-radius: 6px;
    -webkit-transition: 0.3s linear border;
    -moz-transition: 0.3s linear border;
    -ms-transition: 0.3s linear border;
    -o-transition: 0.3s linear border;
    transition: 0.3s linear border;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    z-index: 10;
}

<div id='statements'>

  <div id="entryform" class="editorpane">
      
    <div id="edit-panel">
    
    <form action='/post' name='submitform' id="submitform" method='post'>

    <textarea name='entry[body]' id="statement" placeholder='type in some words or #hashtags to see how they connect or copy and paste your notes or text here'></textarea>

            
    <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">
          

    </form>
    
    </div>

  </div>
</div>

Answer 1

You could use javascript with an event listener on keyup and/or change so that when you paste in your text, it resizes the textarea height to the element.scrollHeight.

let textarea = document.getElementById('textArea');

textarea.addEventListener('change', resizetextArea);
textarea.addEventListener('keyup', resizetextArea);

function resizetextArea(){
  textarea.style.height = `${textarea.scrollHeight}px`;
}

#content {
  position: relative;
  top: 0px;
  /*
    max-width: 320px;
*/
  margin: 0 0 0 0;
  line-height: 1.6em;
  z-index: 1;
  height: 100%;
}

#statements {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding-bottom: 0px;
  max-height: 70%;
  background-color: rgba(255, 255, 255, 0);
  max-width: 340px;
  padding-left: 50px;
  z-index: 10;
  overflow: hidden;
  /*    pointer-events: none;*/
}

#entryform {
  position: relative;
  background-color: var(--entry-form-background);
  width: 340px;
  border-radius: 8px;
  border-top-left-radius: 0px!important;
  padding-top: 10px;
  height: 100%;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-left: -10px;
  margin-bottom: 0px;
  z-index: 10!important;
  display: block;
}

textarea {
  font: 16px 'IstokWeb-Bold', sans-serif;
  position: relative;
  resize: vertical;
  width: 92%;
  max-height: 100%;
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
  padding: 0.5em 0.6em;
  display: block;
  margin: 0.25em 0;
  border: 1px solid #e6e6e6;
  box-shadow: inset 0 1px 3px #e6e6e6;
  border-radius: 6px;
  -webkit-transition: 0.3s linear border;
  -moz-transition: 0.3s linear border;
  -ms-transition: 0.3s linear border;
  -o-transition: 0.3s linear border;
  transition: 0.3s linear border;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  z-index: 10;
}

<p>
  <b>Copy and paste this text:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div id='statements'>

  <div id="entryform" class="editorpane">

    <div id="edit-panel">


      <form action='/post' name='submitform' id="submitform" method='post'>

        <textarea id="textArea" name='entry[body]' id="statement" style="overflow:hidden" placeholder=''></textarea>


        <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">


      </form>

    </div>

  </div>
</div>