flex布局下textarea无法调节大小-resize失效

最新推荐文章于 2023-08-29 15:23:34 发布

胡不归0320

最新推荐文章于 2023-08-29 15:23:34 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： CSS小坑

本文链接：https://blog.csdn.net/u013304372/article/details/79025339

版权

在Flex布局中，直接为textarea设置resize属性和固定初始高度无法使其正常调节大小。解决办法是将resize设为both，并用min-height替代height来设定初始高度。

摘要由CSDN通过智能技术生成

在 flex 布局下，如果想给 textarea 设置一个初始的高度，然后设置可调节高度，这样做无效的。

<div class="container">
    <textarea>  </textarea>
</div>
<style>
    .container {
        display: flex;
        flex-direction: column;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

胡不归0320

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

jquery.resizeTextarea:键入时调整文本区域的大小

05-19

jQuery Resize Textarea插件在键入时调整文本区域的大小。入门 NPM 使用NPM安装软件包并将其添加到您的依赖项中： npm install @mogusbi/jquery.resizetextarea --save 将其介绍给您的页面在页面中包含jQuery，和插件。使用resizeTextarea方法键入时，选择希望调整大小的文本区域。 <!doctype html > < html > < head > ... </ head > < body > < textarea > </ textarea > < script src =" jquery.js " > </ script > < script src =" jquery.copycss.js " > </ script > < scrip

textarea的不可拉伸和不可编辑

QDY5945的博客

10-13

477

不可拉伸： textarea { resize: none; } 不可编辑：第一种方法： <textarea disabled></textarea> 第二种方法： <textarea read...

1 条评论您还未登录，请先登录后发表或查看评论

flex布局下，多个Echarts图表resize有问题

qq_41261490的博客

02-18

2903

场景项目中，我们需要实现一列多行，多个图表，使用flex布局宽度自适应。给图表绑定了resize事件，当窗口从小到大变化时，每个图表resize正常，但是从大变小时，图表resize异常。多方排查之后，才发现是echarts没有兼容flex布局的方式。布局方面项目里我们的布局是固定一列，剩余均分自适应。该组件多个地方使用，内容项不固定，可能4项，也可能3项，所以布局我们使用了flex。 .container { display: flex; } .flex-item1 { width:

css - 解决绝对定位和弹性布局同时出现时弹性布局flex失效的问题

qq_43886365的博客

09-07

4603

解决绝对定位和弹性布局同时出现时弹性布局flex失效问题

css display:flex 弹性布局子标签设置宽度无效的问题

weixin_41897680的博客

05-02

6871

css display:flex 弹性布局子标签设置宽度无效的问题

el-input textarea autosize 无效问题

最新发布

u010749677的博客

08-29

871

给 el-input 加上 ref=“remark”（自己随便起一个名字），在 nextTick 中手动调用下。

Textarea-auto-resize:自动调整文本区域的大小

07-13

Textarea-自动调整大小自动调整文本区域的大小步骤1：在页面底部包含 textarea-autoresize.min.js 第2步：给要自动调整大小的 textarea(s) 类“textarea-auto-resize” 第 3 步：利润

ng.cork.ui.textarea-auto-resize:提供在用户输入或程序更改时调整文本区域大小的指令

06-06

ng.cork.ui.textarea-自动调整大小用于根据用户输入或程序更改调整文本区域大小的 AngularjS 组件入门将ng.cork.ui.textarea-auto-resize添加到您的项目中。通过凉亭： $ bower install --save ng.cork.ui....

resize-observer::glasses:调整React的大小观察器

04-29

rc-resize-observer 调整React的观察者大小。现场演示安装用法 import ResizeObserver from 'rc-resize-observer' ; import { render } from 'react-dom' ; render ( < ResizeObserver xss=removed> { console...

textarea-autosize:自动将textarea调整为其内容的大小

05-05

Textarea自动调整大小自动将textarea调整为其内容的大小。安装$ npm install @github/textarea-autosize用法必须在<textarea>上显式激活自动调整大小的行为。 import autosize from '@github/textarea-...

custom-textarea：Web组件custom-textarea元素

02-06

安装npm i @lemmon/custom-textarea在Web应用程序内部使用// does register the component for you// with `custom-textarea` tagnamerequire ( '@lemmon/custom-textarea' ) 要么// does not register the ...

textarea标签中resize缩放属性的设置

热门推荐

xinxintai的专栏

12-21

3万+

点击打开链接 CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea

resize无效的原因及解决

weixin_42375828的博客

03-16

1893

原因：控件处于布局内，大小由布局控制，resize没用。解决方法：使用setFixedSize(w,h)就可以让窗口大小可以改变了。

elementUI中textarea组件无法autoSize问题记录

ch_jia_jia的博客

04-11

2977

问题：使用饿了么框架中的文本域组件，配置autoSize，使其自适应高度。在输入的过程中，可以正常达到自适应的效果。但预览时，即value有默认值时，autoSize失效。

flex布局无法自动适应的bug以及实现textarea根据内容自适应

dianyan5615的博客

11-03

163

　　-webkit-box布局无法自动适应高度的bug 　　css3的新属性display：-webkit-box带来了前端开发自动适应布局的春天，但是我发现这个布局有个问题，而且这个问题我无法解决；　　描述：如果flex布局内部某一个元素高度自动填高，把一整个盒子高度顶开，然后再把该元素的高度缩小， flex盒子高度还是原来的高度，高度没有改变，必须手动重绘dom，...

vue lib-flexible font-size失效及移动端适配原理

suilyy的博客

01-03

3538

新建项目想使用lib-flexible插件完成屏幕自适应后，设置remUnit：192（设计稿为1920px）后，发现不管在什么尺寸下的屏幕下font-size都为54px，rem也就失去意义了，搜索引擎查了一圈也没看到什么解决方案，只好老老实实看源码了，结果发现对屏幕大小做了限制，大于540px的屏幕一律按540处理了，注释掉这段即完美解决~ ...

html5+css表单input/textarea/select的属性与使用方法/学习笔记

No1banana的博客

02-12

3386

html5+css表单input/textarea/select的属性与使用方法/学习笔记

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

Shino_jie的博客

05-26

1423

经过一系列的测试我发现textarea标签如果放在设置了弹性布局且主轴设置为垂直方向时， textarea标签的cols属性会失效，父容器有多宽textarea的文本框就有多宽还不知道是什么原因 <h3>未设置弹性布局的</h3> <textarea rows="10" cols="1"></textarea> <h3>设置了弹性布局的</h3> <div style="display: flex;flex-dire

textarea 的 resize 属性

夜听雪的博客

03-03

1546

以前在写 textarea 文本域的时候，右下角始终都有一个小标识，可以拖动，变换 textarea的大小后来发现了 resize 属性，可以控制元素的尺寸是否可以调整， resize 可取值有四个： none 不能调整元素的尺寸； both 可调整元素的高度和宽度； horizontal可调整元素的宽度； vertical 可调整元素的高度...

使用flex布局后 vxe-textarea 最小高度失效

05-27

在使用 flex 布局时，vxe-textarea 的最小高度可能会失效，这是因为 flex 布局会影响元素的高度计算。为了解决这个问题，可以将 vxe-textarea 的容器元素设置为 `flex-grow: 1`，并给 vxe-textarea 元素设置一个 `min-height` 属性，如下所示： ```html <div style="display: flex; flex-direction: column; flex-grow: 1;"> <vxe-textarea style="min-height: 50px;"></vxe-textarea> </div> ``` 这样就能保证 vxe-textarea 的最小高度生效了。