When the error message pops up, it causes the login form width to change. A shorter message makes it narrow while a longer message widens it. How can this be resolved without setting a fixed width?
I am using FormHelperText element to show the error message. However, moving FormHelperText inside FormControl does not solve the issue.
// sample 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;
}
}