I have two React ponents that I want to align horizontally next to each other. I use Material-UI's Grid to align ponents (but other solutions are also wele). The problem is that ponents InputVariables and Chart are placed on top of each other (as two rows) instead of being aligned horizontally in a single row. What am I doing wrong?
Current alignment:
| InputVariables |
| Chart |
| Button |
Desired alignment:
| InputVariables | Chart |
| Button |
Main ponent:
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia';
import InputVariables from './checkout/InputVariables';
import Chart from './chart/Chart';
const styles = theme => ({
card: {
maxWidth: 120,
},
appBar: {
position: 'relative',
},
layout: {
width: 'auto',
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit * 2,
[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
width: 600,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 3,
marginBottom: theme.spacing.unit * 3,
padding: theme.spacing.unit * 2,
[theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: {
marginTop: theme.spacing.unit * 6,
marginBottom: theme.spacing.unit * 6,
padding: theme.spacing.unit * 3,
},
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
},
button: {
marginTop: theme.spacing.unit * 3,
marginLeft: theme.spacing.unit,
},
});
class MainForm extends React.Component {
render() {
const { classes } = this.props;
return (
<React.Fragment>
<CssBaseline />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Typography ponent="h1" variant="h4" align="center">
Title goes here
</Typography>
<Grid container spacing={24}>
<Grid item xs={12}>
<InputVariables />
</Grid>
<Grid item xs={12}>
<Chart />
</Grid>
<Grid item xs={24}>
<div className={classes.buttons}>
<Button
variant="contained"
color="primary"
className={classes.button}
>
Check
</Button>
</div>
</Grid>
</Grid>
</Paper>
</main>
</React.Fragment>
);
}
}
MainForm.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MainForm);
Chart.js
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import './Chart.css';
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
function Chart() {
return (
<React.Fragment>
<LineChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
{/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
</LineChart>
</React.Fragment>
);
}
export default Chart;
InputVariables.js
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
function InputVariables() {
return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Set input variables of a model
</Typography>
<Grid container spacing={24}>
<Grid item xs={12}>
<TextField
id="address2"
name="address2"
label="Address line 2"
fullWidth
autoComplete="billing address-line2"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField id="state" name="state" label="State/Province/Region" fullWidth />
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="zip"
name="zip"
label="Zip / Postal code"
fullWidth
autoComplete="billing postal-code"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="country"
name="country"
label="Country"
fullWidth
autoComplete="billing country"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="secondary" name="saveAddress" value="yes" />}
label="Use this address for payment details"
/>
</Grid>
</Grid>
</React.Fragment>
);
}
export default InputVariables;
I have two React ponents that I want to align horizontally next to each other. I use Material-UI's Grid to align ponents (but other solutions are also wele). The problem is that ponents InputVariables and Chart are placed on top of each other (as two rows) instead of being aligned horizontally in a single row. What am I doing wrong?
Current alignment:
| InputVariables |
| Chart |
| Button |
Desired alignment:
| InputVariables | Chart |
| Button |
Main ponent:
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia';
import InputVariables from './checkout/InputVariables';
import Chart from './chart/Chart';
const styles = theme => ({
card: {
maxWidth: 120,
},
appBar: {
position: 'relative',
},
layout: {
width: 'auto',
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit * 2,
[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
width: 600,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 3,
marginBottom: theme.spacing.unit * 3,
padding: theme.spacing.unit * 2,
[theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: {
marginTop: theme.spacing.unit * 6,
marginBottom: theme.spacing.unit * 6,
padding: theme.spacing.unit * 3,
},
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
},
button: {
marginTop: theme.spacing.unit * 3,
marginLeft: theme.spacing.unit,
},
});
class MainForm extends React.Component {
render() {
const { classes } = this.props;
return (
<React.Fragment>
<CssBaseline />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Typography ponent="h1" variant="h4" align="center">
Title goes here
</Typography>
<Grid container spacing={24}>
<Grid item xs={12}>
<InputVariables />
</Grid>
<Grid item xs={12}>
<Chart />
</Grid>
<Grid item xs={24}>
<div className={classes.buttons}>
<Button
variant="contained"
color="primary"
className={classes.button}
>
Check
</Button>
</div>
</Grid>
</Grid>
</Paper>
</main>
</React.Fragment>
);
}
}
MainForm.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MainForm);
Chart.js
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import './Chart.css';
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
function Chart() {
return (
<React.Fragment>
<LineChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
{/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
</LineChart>
</React.Fragment>
);
}
export default Chart;
InputVariables.js
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
function InputVariables() {
return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Set input variables of a model
</Typography>
<Grid container spacing={24}>
<Grid item xs={12}>
<TextField
id="address2"
name="address2"
label="Address line 2"
fullWidth
autoComplete="billing address-line2"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField id="state" name="state" label="State/Province/Region" fullWidth />
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="zip"
name="zip"
label="Zip / Postal code"
fullWidth
autoComplete="billing postal-code"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="country"
name="country"
label="Country"
fullWidth
autoComplete="billing country"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="secondary" name="saveAddress" value="yes" />}
label="Use this address for payment details"
/>
</Grid>
</Grid>
</React.Fragment>
);
}
export default InputVariables;
1 Answer
Reset to default 7Using Material-UI, you can use a Grid ponent and place two grid items occupying half the row size.
Material-UI has a 12 columns grid system (similar to bootstrap) which means for an item to occupy half the size, you give it a 6 columns size.
Check the item xs{6} below:
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
});
class App extends Component {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
</div>
);
}
}
export default withStyles(styles)(App);
In your example, you are using xs={12} and that will make your item occupy all columns in the row forcing the next item to skip to the next line.