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>

Answer 1

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>

Answer 2

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

Question

2 answers

solution1
0 2018-05-09 14:12:47

solution2
0 2018-05-09 14:25:31

how to auto resize text area using pure CSS

Question

2 answers

solution1 0 2018-05-09 14:12:47

solution2 0 2018-05-09 14:25:31

solution1
0 2018-05-09 14:12:47

solution2
0 2018-05-09 14:25:31