时间戳

首页 > 解决方案 > Textarea autoheight 在 flex 中不起作用

reactjs - Textarea autoheight 在 flex 中不起作用

问题描述

我正在使用 Semantic UI React，它们的Textarea 有一个 autoHeight 属性，可以在您创建新行时自动扩展文本区域。如果 Textarea 被具有 display: flex 属性的 Grid.Column 包裹，这将停止工作。

<Grid.Column style={{'display':'flex','flex-direction':'column', 'align-items': 'center', 'justify-content': 'center', width={6}>
    <TextArea autoHeight ></TextArea> 
</Grid.Column>

基本上我想要一个垂直对齐的文本框，并随着添加更多行而自动扩展，但似乎我可以自动扩展它或让它垂直对齐，但无法同时获得两者。

标签： reactjscssflexboxreact-flexbox-grid

解决方案

根据我的评论，下面的 css 确实有效：

textarea {
  height: 100%;
}

我已经从代码框中打开了您的示例代码并修改为如下所示：

<TextArea
    name="itemTopic"
    defaultValue={comparison.a}
    rows={1}
    style={{
    fontSize: "20px",
    textAlign: "center",
    width: "100%",
    height: "100%"
  }}
/>

所以我删除了 autoHeight: 因为它会生成一个内联样式height: auto并添加height: 100%.

这行得通，因为所有 textarea 标签都将具有相同的高度，您可能需要添加 aminHeigh: 100px // or something以获得所需的高度。

谢谢

推荐阅读