how to auto resize text area using pure CSS

Question

How to auto resize text area using pure CSS?

<div>
  <div>
    <textarea appAutosize class="form-control new-form-control"  [(ngModel)]="FormDataJSON.Remarks" attr.value="{{FormDataJSON.Remarks}}" id="Remarks" name="Remarks" [attr.disabled]="FormDataJSON.FormOptions.Remarks.disabled ? '':null" [attr.readonly]="FormDataJSON.FormOptions.Remarks.readonly ? '':null"
    [required]="FormDataJSON.FormOptions.Remarks.required" #Remarks="ngModel" onfocus="this.placeholder = 'Enter remarks here' " onblur="this.placeholder = ''" >{{FormDataJSON.Remarks}}</textarea>
    <label class="control-label new-control-label" for="Remarks">Remarks</label>
  </div>
</div>

You want to autoresize following what rule ? The size of its parent, of the whole page, of the user's viewport ? We need more informations. — Seblor, May 09 '18 at 08:51
If you want to autoresize as text grows, you need to use javascript. It is not possible with CSS. Because it has to listen to an event. — Akash Pinnaka, May 09 '18 at 09:00
This might help: https://stackoverflow.com/questions/15865982/it-is-possible-to-expand-a-textarea-only-with-css — Flink, May 09 '18 at 09:02

score 0 · Answer 1 · answered May 09 '18 at 14:12

It will give you a text area that support resizing

<html>
<head>
<style> 
div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}
</style>
</head>
<body>
<div>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>

score 0 · Answer 2 · answered May 09 '18 at 14:25

You can't auto resize based on text content, but if your talking about resize based on screen size you can. You are using bootstrap so you may need to override the css for textareas that bootstrap has otherwise its just

textarea {
    width: 80%; 
    height: 20%;
}

what ever percentage you want for width and height.

Or just use media rules for different sizes such as

@media (max-width: 420px) {
    #Remarks {
        width: 320px;
        height: 80px;
    }
}
@media (max-width: 767px) {
    #Remarks {
        width: 500px;
        height: 100px;
    }
}

how to auto resize text area using pure CSS

2 Answers2