CODEWITHSUNDEEP
reactjsmaterial-ui
leonormes
leonormes

Reputation: 1029

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!

Upvotes: 8

Views: 11392

Answers (9)

HuSaad
HuSaad

Reputation: 210

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}

Upvotes: 0

Yash Sharma 5273
Yash Sharma 5273

Reputation: 33

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

Upvotes: 3

TillyJonesy
TillyJonesy

Reputation: 140

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

Upvotes: 0

Christopher Caldwell
Christopher Caldwell

Reputation: 154

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

Upvotes: 13

foreverAnIntern
foreverAnIntern

Reputation: 501

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

Upvotes: -1

gunesc
gunesc

Reputation: 31

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>

Upvotes: 3

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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

Upvotes: -1

leonormes
leonormes

Reputation: 1029

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.

Upvotes: 3

Andr&#233; Junges
Andr&#233; Junges

Reputation: 5367

You could just use the errorStyle property setting an absolute position.. That's how I fix those problems in my projects.

Upvotes: 4

Related Questions