How do I make the width of my html elements fixed?

Question

I have a user registration form that renders error messages when the input fields fail the validation. When the error messages are rendered, all the elements become wider. How can I prevent them from becoming wider?

It seems that the following lines are causing it to expand:

{errors.name && <p>{errors.name.message}</p>}
{errors.email && <p>{errors.email.message}</p>}
{errors.password && <p>{errors.password.message}</p>}

I'm also using Material UI, and react-hook-form.

Before error:

After error:

My code:

    return (
        <Box
            sx={{
                marginTop: 8,
                display: "flex",
                flexDirection: "column",
                alignItems: "center"
            }}>
            <Typography
                variant="h2"
                sx={{
                    color: theme.palette.text.primary,
                    fontWeight: "bold"
                }}
            >
                {Constants.Create.REGISTER_HEADER}
            </Typography>
            <Typography
                variant="h4"
                sx={{
                    color: theme.palette.text.secondary
                }}
            >
                {Constants.Create.REGISTER_SUBHEADER}
            </Typography>
            <Box component="form" noValidate onSubmit={handleSubmit(onSubmit)} sx={{ mt: 2 }}>
                <Grid container spacing={1}>
                    <Grid item xs={12}>
                        <Typography
                            variant="subtitle1"
                            sx={{
                                color: theme.palette.text.secondary
                            }}
                        >
                            {Constants.Create.NAME_HEADER}
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <Controller
                            name="name"
                            control={control}
                            render={({ field }) => (<TextField
                                {...field}
                                margin="normal"
                                required
                                fullWidth
                                id="name"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                            )}
                        />
                        {errors.name && <p>{errors.name.message}</p>}
                    </Grid>
                    <Grid item xs={12}>
                        <Typography
                            variant="subtitle1"
                            sx={{
                                color: theme.palette.text.secondary
                            }}
                        >
                            {Constants.Create.EMAIL_HEADER}
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <Controller
                            name="email"
                            control={control}
                            render={({ field }) => (<TextField
                                {...field}
                                margin="normal"
                                required
                                fullWidth
                                id="email"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                            )}
                        />
                        {errors.email && <p>{errors.email.message}</p>}
                    </Grid>
                    <Grid item xs={12}>
                        <Typography
                            variant="subtitle1"
                            sx={{
                                color: theme.palette.text.secondary
                            }}
                        >
                            {Constants.Create.PASSWORD_HEADER}
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <Controller
                            name="password"
                            control={control}
                            render={({ field }) => (<TextField
                                {...field}
                                type="password"
                                margin="normal"
                                required
                                fullWidth
                                id="password"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                            )}
                        />
                        <Box>
                            {errors.password && <p>{errors.password.message}</p>}
                        </Box>
                    </Grid>
                    <Grid item xs={12}>
                        <FormControlLabel
                        ...
                        />
                    </Grid>
                </Grid>
                <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    size="large"
                    sx={{ mt: 2, mb: 2 }}
                >
                    {Constants.Create.CREATE_ACCOUNT}
                </Button>
            </Box>
        </Box >
    )

How can I sort of fix the width of the elements? Or prevent the error messages from increasing the width?

Answer 1

Use CSS for this. Make sure your HTML elements <input> have the following styling:

input {
   display: block;
   width: 100%
}

CSS should keep the size of your HTML elements, before and after the JS validation.