在表格中

时间:2018-07-24 15:12:23

标签: css reactjs material-ui

我有一个Material UI Table

我这样构建它:

tableValues.map((curRow, row) => {
    tableRows.push(
        <TableRow key={this.state.key + "_row_" + row}> 
        {curRow.map((cellContent, col) => {
        let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}

        return (
            <TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
                {col===0 && this.props.rowHeaders ?
                <div className={classes.header}>{cellContent}</div> :
                <Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
            </TableCell>
        )})}
        </TableRow>
        );
    return null;
});

return (
    <Table key={this.props.key + "_table"} className={classes.table}>
        <TableHead>
            <TableRow>
                {this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
            </TableRow>
        </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>
);

Question实际上是这样创造的光荣的[TextField] 2

            <div>
                <TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}                      
                />
            </div>

...然后包裹在Paper中。

样式是:

tableCell: {
    padding: 5,
},
textField: {
    padding: 0,
    margin: 0,
    backgroundColor: "#191",
}

此方法有效,我在每个单元格中获得了适当的内容。...但是Question元素的宽度超出了所需的宽度,并且似乎具有最小宽度和一些无法删除的填充。

该表是全角的,直到到达特定点为止,然后在这里注意:

enter image description here

当窗口缩小到特定水平以下时,表不会进一步缩小。就像内部的元素具有最小宽度一样。

作为调查的过程,我将Question元素更改为仅返回“ Hi”。完成后,该表将如下所示:

enter image description here

(也就是说,它凝结得很好……顶部,底部和右侧的填充仍然太多,但是效果更好)

因此,我认为问题出在我的Question组件上。我应该注意,在其他Questions上也会发生这种情况-当未为它们定义宽度时,它们似乎都具有最小宽度...除非它们被放置在具有指定宽度的容器内,例如Material UI Grid。例如,当放置在“网格”中且窗口缩小时,它们会适当缩小:

enter image description here

那么为什么Table / TableCell不能像Grid一样缩小TextField? (或:如何删除textField上明显的“ MinWidth”?)如果未另行指定,则材料UI TextField是否具有最小宽度?

对于它的价值,我尝试指定表的列宽-当表宽时成功,但是它仍然不能解决明显的最小宽度问题。

我也尝试将Question组件更改为<input type="text" name="fname" />,但仍然遇到相同的问题。有趣的是,Question组件只是“嗨”,问题消失了,但是当它是输入时,它就会出现。

1 个答案:

答案 0 :(得分:0)

我发现本机输入字段的默认宽度为20个字符:https://www.w3schools.com/tags/att_input_size.asp

“大小”属性是关键:

  

以字符为单位指定元素的宽度。默认   值是20

要设置TextField的宽度,必须将属性传递到本机输入字段。

  

如果您希望更改应用于本机输入的属性,则可以   可以这样做,如下:

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

对于我的用例,以下内容将TextField的大小修改为10个字符:

<TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}   
                    inputProps={{
                        size: 10
                    }}                      
                />

不幸的是,这有点糊涂。它既不将输入字段精确地保持在size也不将其视为最小大小。... GridItems,表格列,自由流动的伸缩区域和实际的TextField元素...我不熟悉什么总是“赢”。