如何为 Element UI 里的 autosize textarea 设置高度

所属分类: HTML/Xhtml / 网页制作 阅读数: 1653
收藏 0 赞 0 分享

把Element UI里的textarea input设置为autosize之后,文本框的默认高度为33,并不符合设计

默认样式

在浏览器中查检元素,发现

高度是由textareaheightmin-height来控制框内文字的位置是由padding控制尝试

直接修改文本框的heightpadding,看看能否起作用

全局样式里添加:

$inputHeight: 38px;$inputFontSize: 16px;.el-textarea {
  textarea {
    padding: 8px; // 设置文本框的 padding    height: $inputHeight; // 设置文本框的 height    font-size: $inputFontSize;
    line-height: 21px;
  
}

}

改过之后发现:

  • padding 已经是新设置的大小了
  • height 并不是我设置的高度

有意思的是,这个文本框的height是由行内样式所控制

面对这个问题,我做了两个尝试

!important

height设置为!important,高度是变了,但它不能自动扩展了

-> 放弃

MyTextarea

自己写textarea组件,这样一来样式是可以随意改了,但要实现文本框随内容扩展的话还得写一堆 js ,成本有点高

-> 不优先使用

padding 决定了 height

在调试过程中发现,Element UI里的autosize textarea的初始高度是会随着padding的值变化

所以,我就在浏览器里调整padding的大小 ,直到它撑起来的高度和figma里要求的高度一致

然后把全局样式里的padding改成对应的值

$inputFontSize: 16px;.el-textarea {
  textarea {
    padding: 7.5px 0 7.5px 8px; // 只要改变这里的 padding 就可以影响到 textarea 的高度    font-size: $inputFontSize;
    line-height: 21px;
  
}

}

到此这篇关于如何为 Element UI 里的 autosize textarea 设置高度的文章就介绍到这了,更多相关Element UI autosize textarea 高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

更多精彩内容其他人还在看

用标准dl,dt,dd标签抛弃table列表

现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTM... 查看详情
收藏 0 赞 0 分享

HTML网页中的URL表示方式

在HTML中,常见的URL有多种表示方式: 相对URL: 复制代码代码如下: example.php demo/example.php ./example.php ../../example.php /example.php 绝对URL: 复制代码代码如下: http://jb5... 查看详情
收藏 0 赞 0 分享

Web页面 自定义选择框Select

select下拉列表表单可能大家都很熟悉,不过默认的下拉列表表单往往会让一些网站觉得丑陋,同时用CSS也很难调整select的样式。因此许多网站位了做出更符合网站风格的select下拉表单,往往会用JS来模拟这种效果。比如我们很熟悉的土豆网,淘宝商城和亚马逊都是用JS做的下拉列表... 查看详情
收藏 0 赞 0 分享

html 标签ID可以是变量

<table id=" <%=var1%>">,调用的时候必须用var1的实际值了 JS里面也是一样 document.getElementById(" <? echo $blogid; ?>"); 具体... 查看详情
收藏 0 赞 0 分享

iframe 自适应大小实现代码

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.htm... 查看详情
收藏 0 赞 0 分享

40多个漂亮的网页表单设计实例

网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的,这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因,尽管如此,甚至在形式设计中它也担当创意中的有效部分。网页表单并非都是乏味的,使用css或flash,你能确保它们具有吸引力且有效。要注意,你需要提出一些独特且... 查看详情
收藏 0 赞 0 分享

HTML减肥 精简HTML标记制作网页

HTML 4HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删除线加以标记)</area></base><body><... 查看详情
收藏 0 赞 0 分享

HTML网页制作教程 谨慎使用iframe标记

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 if... 查看详情
收藏 0 赞 0 分享

HTML 网页头部代码全清楚

以下所有代码全是在<head>...</head>之间,具体内容有:1,<title>…</title>标题元素,帮助用户更好识别文件,有且只有一个。当作为首页或收藏时做文件名。2,<link>&helli... 查看详情
收藏 0 赞 0 分享

HTML 5 Reset Stylesheet

这份css reset是在Eric Meyers的 CSS reset基础上修改出来的,特别针对HTML5调整了相应标签的初始化样式。 /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clar... 查看详情
收藏 0 赞 0 分享
查看更多