How to make Material UI TextField less wide when in Table

Question

I've got a Material UI Table.

I build it like this:

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>
);

The Question is actually a glorified [TextField]2 created thusly:

            <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>

... and then wrapped in Paper.

The styles are:

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

This works, I get the appropriate content in each cell.... but the Question element is way wider than needed, and appear to have a min width and some padding I can't remove.

The table is full-width until you get to a certain point, then notice here:

that when the window is shrunk below a certain level, the table doesn't shrink any further. Acting as if the elements inside have a minimum width.

As a process of investigation, I change the Question element to simply return "Hi". When it does, the table then looks like this:

(which is to say, it condenses nicely... still too much padding on the tops and bottom and right, but WAY better)

So that leads me to believe the issue is with my Question component. I should note this happens on other Questions as well -- they all appear to have a min width when a width is not defined for them... UNLESS they are placed inside a container that has a designated width such as a Material UI Grid. For example, when placed in a `Grid and the window is shrunk, they shrink appropriately:

So why isn't the Table/TableCell also shrinking the TextField like the Grid does? (or: how do I remove the apparent "MinWidth" on my textFields?) Do Material UI TextFields have a minimum width if one isn't otherwise specified?

For what it's worth, I have tried specifying the column widths of the table -- with success when the table is wide, but it still doesn't solve the apparent minimum width issue.

I have also tried changing the Question component to <input type="text" name="fname" /> and still have the same problem. It's interesting that that the Question component is simply "hi" the problem disappears but that when it's an input, it shows up.

Answer 1

I have discovered that the native input fields default width is 20 characters: https://www.w3schools.com/tags/att_input_size.asp

The 'size' property is key here:

Specifies the width of an element, in characters. Default value is 20

To set the width of the TextField, you must pass properties to the native input field.

If you wish to alter the properties applied to the native input, you can do so as follows:

const inputProps = {
  step: 300,
};

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

For my use case, the following modified the sizes of the TextFields to be 10 characters in size:

<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
                    }}                      
                />

Unfortunately, this is a bit squishy... it neither holds the input field at exactly size nor does it treat it like a minimum size.... There appears to be some heirarchy of sizing in play between GridItems, table Columns, free-flow flex areas, and the actual TextField elements... and I'm not well versed enough to know what always 'wins'.