【web】textarea标签的cols属性失效，解决办法

经过一系列的测试

我发现textarea标签如果放在设置了弹性布局且主轴设置为垂直方向时，

textarea标签的cols属性会失效，父容器有多宽textarea的文本框就有多宽

还不知道是什么原因

<h3>未设置弹性布局的</h3>
<textarea rows="10" cols="1"></textarea>
<h3>设置了弹性布局的</h3>
<div style="display: flex;flex-direction: column;"><textarea rows="10" cols="1"></textarea>
</div>

效果如下：

解决办法：

这种情况要给下面的这个设置宽度width才会对文本框有作用

【web】textarea标签的cols属性失效，解决办法相关推荐

HTML中的多行输入框：textarea标签、cols属性、rows属性。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>下拉列 ...
ios下多行文本输入框bug，textarea标签的maxlength属性在ios上计算
描述问题: textarea多行文本输入在ios上的bug 问题原因: textarea标签的maxlength属性在ios上计算有问题,ios的换行会占用两个字符.如下:ios换行(\n)其实是占用 ...
关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
form表单嵌套,用标签的form属性来解决表单嵌套的问题参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...
HTML textarea 标签的 wrap 属性
HTML <textarea> 标签的 wrap 属性 wrap 属性通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器.只有用户按下 Enter ...
jsp中导入jsf标签库_初学jsf，自制的标签使用时报错？解决办法
当前位置:我的异常网» Java Web开发 » 初学jsf,自制的标签使用时报错?解决办法初学jsf,自制的标签使用时报错?解决办法 www.myexceptions.net 网友分享于:201 ...
一些样式选不中或者添加了!important还是不起作用的属性样式解决办法
在引用第三方ui库时,针对一些样式选不中或者添加了!important还是不起作用的属性样式解决办法: 在页面中单独再使用一个<style></style>标签,不加scope ...
打包时出现的异常。XXXXXXX-1.0-SNAPSHOT.jar中没有主清单属性的解决办法
打包时异常信息如下: Some problems were encountered while building the effective model for com.llq:redis:jar:1 ...
layui分页按钮失效解决办法
layui分页按钮失效解决办法问题:分页条数没问题,但是无论点击分页按钮第一页还是第二页或者第N页,都是一次性把所有结果集返回,没有实现我们的效果想要的结果是点击下方的分页按钮,表格能显示成上面的 ...

【web】textarea标签的cols属性失效，解决办法

【web】textarea标签的cols属性失效，解决办法相关推荐

最新文章

热门文章