Error message changes width of all block. How to fix it? - html

Question

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

Answer 1

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.