'Adding ErrorText to material-ui Textfield moves other elements

I have a signup form in a React app. I am using material-ui TextField and use the errorText property to add a message if there is an error in the input.

errorText={this.state.messages.emailMessage}

The state.messages.emailMessage is initially set to null and so TextField does not have the extra space for the message when the input is first rendered.

When the message is added it moves the other elements.

How can I allow space for the new node if it is needed so that the other elements are not moved? I tried setting the initial state of the message to ' ' but this colours the input red for error and doesn't work anyway!

reactjs material-ui

Solution 1:^[1]

In the end I passed a style parameter to the material-ul component that set the errorText to display: table. This then stopped it from affecting the other elements when it was added.

Solution 2:^[2]

You can make them a fixed height by making the helperText equal to an empty space when there is no message to show.

<TextField helperText={error ? error.message : ' '} />

Solution 3:^[3]

To where should this style added?

It needs to be added for the HelperText styles. Here is an example:

const helperStyles = makeStyles(theme => ({
  root: {
      position: 'absolute',
      bottom: '1em',
  },
}))

const helperClasses = helperStyles()

<FormHelperText classes={helperClasses}>
    {helperText}
</FormHelperText>

Solution 4:^[4]

For those who need an updated answer (errorText isn't a thing anymore as far as I could tell), then hopefully this will work:

<Box style={{ minHeight: "100px" }} >
  <TextField
    {...props}
  />
</Box>

It allows the error text message to be rendered inside the flexbox without affecting the other components, so it shouldn't disturb the things around it. CodeSandbox

Solution 5:^[5]

Like @leonormes 's post suggests, adding the errorStyle prop to the material ui component and setting the display property to "table" solved this issue.

The material UI components no longer moves or becomes unaligned when showing an error.

Here's what the component ended up looking like:

<TextField
    floatingLabelText="Name"
    value={this.state.name}
    onChange={e => this.setState({ name: e.target.value })}
    errorText={this.props.validationErrors.get('name')}
    errorStyle={{ display: "table" }}
/>

Solution 6:^[6]

You can target the MuiFormHelperText-root class . Below example is when you are applying style inside MUI makeStyles , but you can do the same thing with external CSS file .

'& .MuiFormHelperText-root' : {
     position : 'absolute',
     bottom : '-1rem'
 }

Solution 7:^[7]

You can do something like this

  
  
  const useStyles = makeStyles({
        helperText: {
            '& .MuiFormHelperText-root': {
                height: '0',
                marginTop: '0'
            }
        }
    });
    
    
  And then add this class text field control 

  className={classes.helperText}

Solution 8:^[8]

Just setting position to absolute didn't work at all. This enables error text to display on input field. So for perfect fix we also have to set bottom with some value to make it fixed. Example below.

errorStyle:{
      position: 'absolute',
      bottom: '-0.9rem'
    }

As mentioned in other answer setting display to table worked as well.

So both the styles works

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	leonormes
Solution 2	Christopher Caldwell
Solution 3	gunesc
Solution 4	foreverAnIntern
Solution 5	mxxn
Solution 6	Yash Sharma 5273
Solution 7	HuSaad
Solution 8	Hemadri Dasari

'Adding ErrorText to material-ui Textfield moves other elements

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]