Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

271
Views
Styling table made with formik and material UI grid - spacing

i'm builde form using formik and material-ui. everything works well. i do have an issue in the styling, my form do not use the full horizontal space. here's my code:

and a view of what's render:

 <Grid container 
        direction="row"
        justifyContent="space-evenly"
        alignItems="center">
            <Grid item xs={12}>
                <ContentHeader name='Add Driver' style = {toolbarStyle} />
            </Grid>
            <Grid item xs={12}>
                <Container maxWidth='md'>
                    <div className={classes.formWrapper}>
                        <Formik
                            initialValues={{
                                ...INITIAL_FORM_STATE
                            }}
                            validationSchema={FORM_VALIDATION}
                            onSubmit={(values) => {
                                console.log(values);
                            }}
                        >
                            <Form>
                                <Grid container spacing={4}>
                                    <Grid item xs={12}>
                                        <Typography>Driver details</Typography>
                                    </Grid>

                                    <Grid item xs={4}>
                                        <UITextfield name='firstName' label='First Name' />
                                    </Grid>

                                    <Grid item xs={4}>
                                        <UITextfield name='lastName' label='Last Name' />
                                    </Grid>

                                    <Grid item xs={4}>
                                        <UITextfield name='email' label='Email' />
                                    </Grid>

the Styling:

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
    formWrapper: {
        marginTop: theme.spacing(5),
        marginBottom: theme.spacing(8)
    }
}));
const toolbarStyle = {
    backgroundColor: "#ffca28"
  }

the view the space right and left is the issue THx for the help

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!