[英]how to auto resize text area using pure CSS
如何使用纯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>
它将为您提供支持调整大小的文本区域
<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>
您不能根据文本内容自动调整大小,但是如果您谈论基于屏幕大小的调整大小,则可以。 您正在使用引导程序,因此您可能需要覆盖css以获取引导程序具有的文本区域,否则
textarea {
width: 80%;
height: 20%;
}
您想要的宽度和高度百分比。
或者只是使用不同大小的媒体规则,例如
@media (max-width: 420px) {
#Remarks {
width: 320px;
height: 80px;
}
}
@media (max-width: 767px) {
#Remarks {
width: 500px;
height: 100px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.