When the error message appears it changes the login form width. The short message makes it shorter and long - longer. How to fix it without adding a fixed with?

I use FormHelperText element to display an error message. Moving FormHelperText inside FormControl doesn`t fix the problem.

// some code ....
  render () {
    const { email, password, error } = this.state;
    const isInvalid = password === '' || email === '';

    return (
      <Paper className={styles.paper}>
        <Avatar className={styles.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component='h1' variant='h5'>
          Login
        </Typography>
        <form onSubmit={this.onSubmit} className={styles.form}>
          <FormControl margin='normal' required fullWidth>
            <InputLabel htmlFor='email'>Email Address</InputLabel>
            <Input
              id='email'
              name='email'
              autoComplete='off'
              autoFocus value={email}
              onChange={this.onChange}
            />
          </FormControl>
          <FormControl margin='normal' required fullWidth>
            <InputLabel htmlFor='password'>Password</InputLabel>
            <Input
              name='password'
              type='password'
              id='password'
              autoComplete='off'
              value={password}
              onChange={this.onChange}
            />
          </FormControl>
          {error &&
            <FormHelperText className={styles.error} error>{error.message}</FormHelperText>
          }
          <Button
            type='submit'
            fullWidth
            variant='contained'
            color='primary'
            disabled={isInvalid}
            className={styles.formSubmitBtn}
          >
            Login
          </Button>
        </form>
      </Paper>
    );
  }
.paper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  margin-top: 20px;
}

.error {

}

.form {
  margin: 30px 30px;

  &__submit-btn {
    margin-top: 20px !important;
  }
}

short error message

default

1 Answers

0
Community On

There are the max-width and min-width properties in CSS that you can specify. They will ensure that the width stays between the specified sizes. If the content exceeds max-width, it affects the height of the box.