CODEWITHSUNDEEP
reactjsreduxmaterial-ui
user12250169
user12250169

Reputation:

ReactJS Material UI aligning form field center

I am going through a trouble to align my react form to center.

This is my form:

I am using reactjs Material UI

 <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

i am trying to align the form to center.

If you want to see entire component, this is the component that contain the form

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';


function App(props) {
  const useStyles = makeStyles(theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200,
    },
  }));
  const classes = useStyles();


  return (

    <React.Fragment>
    <div className={classes.container}>

        <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

    </div>

    </React.Fragment>

  );
}

export default App;

Can anyone help me to make this form to center? I tried whole day long but i failed to align.

Upvotes: 0

Views: 9501

Answers (1)

Fyodor Yemelyanenko
Fyodor Yemelyanenko

Reputation: 11848

  1. If you use to make form centered horizontally, add following style to makeStyles

    formGroup: {
  alignItems: 'center'
}

    and assign formGroup class name to <FormGroup>

    <FormGroup className={classes.formGroup} noValidate autoComplete="on">
    <TextField
        label="SSN"
        type="number"
        className={classes.textField}
        name='ssn'
    />
</FormGroup>

    Here is working form

  2. If you want to center it vertically and horizontally, the easiest way is to make some root <div> positioned absolutely and set width and height to 100%. This makes <div> to occupy whole screen. Then you can use justify-content and align-items to center form.

    container: {
  display: "flex",
  flexWrap: "wrap",
  position: "absolute",
  top: 0,
  left: 0,
  height: "100%",
  width: "100%",
  alignItems: "center"
},

    Here is working form, that is aligned to center both horizontally and vertically

Upvotes: 3

Related Questions