[英]How can I make the child of a Material UI TableCell Component fill the cell's height?
I'm using MUI v5 for a table.我正在使用 MUI v5 作为表格。 The table has two columns where cells contain multiline TextFields.
该表有两列,其中单元格包含多行文本字段。 I want the TextFields to completely fill the cell area.
我希望 TextFields 完全填充单元格区域。 The problem is that once you start entering lines into the text field in one column, the height of the textfield in the other column remains the same, it doesn't fill out the table cell.
问题是,一旦您开始在一个列的文本字段中输入行,另一列中文本字段的高度将保持不变,它不会填充表格单元格。 Image:
图片:
Red is the backgroundColor of the TableCell, yellow is the backgroundColor of the TextField. Red 是 TableCell 的 backgroundColor,黄色是 TextField 的 backgroundColor。 I don't want to see any red, I want the textfield in the left column to increase its height as data in the right textfield is added.
我不想看到任何红色,我希望左列中的文本字段在添加右侧文本字段中的数据时增加其高度。
I've tried different CSS combinations with height 100% and positions.我尝试了高度 100% 和位置的不同 CSS 组合。 I also can't use flexbox on the TableCell and flexGrow on the Input because that breaks the TableCell and stops it from filling up the height of the row.
我也不能在 TableCell 上使用 flexbox,在 Input 上使用 flexGrow,因为这会破坏 TableCell 并阻止它填充行的高度。
Code example: https://codesandbox.io/s/mui-playground-forked-xst8h?file=/src/containers/app.js代码示例: https : //codesandbox.io/s/mui-playground-forked-xst8h?file=/src/containers/app.js
import React from "react";
import * as material from "@material-ui/core";
const App = () => (
<material.TableContainer component={material.Paper}>
<material.Table aria-label="simple table" stickyHeader={true} size="small">
<material.TableBody>
<material.TableRow>
<material.TableCell
align="center"
style={{
backgroundColor: "red",
padding: 0,
height: "100%"
}}
>
<material.TextField
multiline
variant="outlined"
style={{
flexGrow: 1,
height: "100%",
width: "100%",
backgroundColor: "yellow"
}}
/>
</material.TableCell>
<material.TableCell
align="center"
style={{
backgroundColor: "red",
padding: 0
}}
>
<material.TextField
multiline
variant="outlined"
style={{
height: "100%",
width: "100%",
backgroundColor: "yellow"
}}
/>
</material.TableCell>
</material.TableRow>
</material.TableBody>
</material.Table>
</material.TableContainer>
);
export default App;
You need to set height: 0
to the td
element and then set height: 100%
to the textarea
element.您需要将
height: 0
设置为td
元素,然后将height: 100%
设置为textarea
元素。 Also need to set for .MuiOutlinedInput-inputMultiline
class height: 100%
还需要为
.MuiOutlinedInput-inputMultiline
类设置height: 100%
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.