For my project I'm tasked to use material-ui. Is there a way to reduce the width height of the div containing "Sign In With" text as shown in pic to bring the buttons closer to the text?
From this:
To this:
The code:
<div className={classes.root}>
<Grid
container
direction="row"
spacing={0}
>
<React.Fragment>
<Grid item xs={6} container direction="row">
<Grid item xs={12}>
<h1>Sign In With</h1>
</Grid>
<Grid item xs={12} container>
<Grid item xs={3}>
<Button
className={classes.buttonGoogle}
onClick={() => {
if (props.onSelectGoogle !== undefined)
props.onSelectGoogle('google');
}}
>
Google
</Button>
</Grid>
<Grid item xs={3}>
<Button
className={classes.buttonLinkedIn}
onClick={() => {
if (props.onSelectLinkedIn !== undefined)
props.onSelectLinkedIn('linkedin');
}}
>
LinkedIn
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<div className={classes.LoginImage}></div>
</Grid>
</React.Fragment>
</Grid>
</div>
The First layer Grid is enough, the inside one just complicates stuff.
I removed the inside grid (the one containing title and buttons).
You can add some styles to title and buttonsContainer
<div className={classes.root}>
<Grid container direction="row" spacing={0} >
<Grid item xs={6} >
<h1 className={classes.title} >Sign In With</h1>
<div className={classes.buttonsContainer} >
<Button
className={classes.buttonGoogle}
onClick={() => {
if (props.onSelectGoogle !== undefined)
props.onSelectGoogle('google');
}}
>Google</Button>
<Button
className={classes.buttonLinkedIn}
onClick={() => {
if (props.onSelectLinkedIn !== undefined)
props.onSelectLinkedIn('linkedin');
}}
>LinkedIn</Button>
</div>
</Grid>
<Grid item xs={6}>
<div className={classes.LoginImage}></div>
</Grid>
</Grid>
</div>
Related
I am using material-ui grid for responsive stuff. But i am not able to create nested rows for my view. I need first 1 row after that i am dividing into 3 columns with 3,3,6.For first column i need to divide into two rows which should match the height of 2 and 3 columns.I don't know how to separate column into two rows.
code:
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={3}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
You should put item xs.={...} only on the items but not on the contsiners.
Nexts, you propably want to define sm={...} (and the other screen sizes) on the items as well. A xs with 12 will always take the full row.
Have a look on the documentation for examples https://material-ui.com/components/grid/
I think this should be enough for your case:
<Grid container>
<Grid container item xs={3}>
<Grid item xs={12} style={{border: "black solid 1px"}}>
column 1, row 1
</Grid>
<Grid item xs={12} style={{border: "black solid 1px"}}>
column 1, row 1
</Grid>
</Grid>
<Grid item xs={3} style={{border: "black solid 1px"}}>
column 2
</Grid>
<Grid item xs={6} style={{border: "black solid 1px"}}>
column 3
</Grid>
</Grid>
I am trying to render a list of 25 words on a 5x5 grid using the MUI Grid component. The 5x5 grid itself is a <Grid container direction="column"> containing five <Grid item>. Within each of those five <Grid item> is the following structure:
<Grid container direction = "row">
<Grid item xs={2} key={1}>
<Paper>
<Typography> word </Typography>
</Paper>
<Grid>
<Grid item xs={2} key={2}>
...
</Grid>
...
<Grid item xs={2} key={5}>
...
</Grid>
</Grid>
It renders as expected initially. However, whenever the component re-renders, the width of the grid decreases bit-by-bit on each re-render.
I've recreated the issue here:
You <Grid item> has no size defined. Set size accordingly :
Example
<Grid container direction = "row">
<Grid item xs={12} sm={6} md={3} lg={3} xl={2}>
<Paper>
<Typography> word </Typography>
</Paper>
<Grid>
</Grid>
Also there is no prop for Grid like key. Its a attribute for React to identify component in a map function. It has nothing to do with material UI
Updated
From
<Grid item md={12}>
<Grid container alignItems="center" justify="center">
{wordRows}
</Grid>
</Grid>
To
<Grid item container alignItems="center" justify="center">
{wordRows}
</Grid>
Suppose we have the Grid
const App = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
const classes = useStyles();
return (
<>
<Grid container>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid item xs={12}>
</Grid>
</Grid>
</Grid>
</>
);
};
export default App;
How can we imitate PaddingTop and add empty rows from the top using Grid ?
You can acquire the space using spacing={10} in the top Grid container to adjust.
Also, you can add a new Grid with xs={12} if you want something to show.
import React from "react";
import "./styles.css";
import { Grid, makeStyles, Paper } from "#material-ui/core";
export default (App = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
const classes = useStyles();
return (
<>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid item xs={12} />
</Grid>
</Grid>
</>
);
});
Hello i need to move my grids to display the following layout
However right now my layout looks like this
I am still trying to understand how grid work, below is my attempt at formatting the grid, however it doesn't want to align itself in the manor of which i wish
<Grid item xs={8}>
<Grid className = {classes.root} container direction ="column"
alignItems="flex-start">
{/* <Typography variant="title" style={{ }}>example</Typography> */}
<Paper className = {classes.mainDetailsPaper}>
<Typography variant="title">Main Details</Typography><Divider />
<Typography variant="subheading">Organisation: </Typography>
<Typography variant="subheading">Category: </Typography>
<Typography variant="subheading">Sub Category: </Typography>
</Paper>
</Grid>
<Grid className = {classes.root} container direction ="row"
alignItems="flex-end">
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Contract Dates</Typography><Divider />
<Typography variant="subheading">Start Date: </Typography>
</Paper>
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Valuation</Typography><Divider />
<Typography variant="subheading">Estimated Contract Value: </Typography>
</Paper>
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Supplier Info</Typography><Divider />
</Paper>
</Grid>
</Grid>
I'm using material-ui to do a form, using the Grid system I'd like to do the following:
<Grid container>
<Grid item xs={4} />
<Grid item xs={4} />
<Grid item xs={4} />
</Grid>
And be able to put the first 2 items, on the first row and the third on a second row, the only way I found to do it is:
<Grid container>
<Grid item xs={4} />
<Grid item xs={4} />
</Grid>
<Grid container>
<Grid item xs={4} />
</Grid>
What is the better way to stack material-ui Grid into rows (like the row class concept in Bootstrap grid)?
I also thought about these options:
filling the first row with empty Grid item?
putting vertical container?
You are close with the second block of code.
I found that you could simply create 2 distinct Grid sections such as:
<div>
<Grid id="top-row" container spacing={24}>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 1, 1</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 2, 1</Paper>
</Grid>
</Grid>
<Grid id="bottom-row" container spacing={24}>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 1, 2</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 2, 2</Paper>
</Grid>
</Grid>
</div>
You can play with it in my sandbox
It might also be work checking out the official documentation for Grid, as it shows a few ways to use it and also links to each exapmle hosted on codesandbox.io so you can play with it yourself.
From the docs, it seems the best way to have multi-layered grid systems is to define the width of the overall grid and then to define the width of each cell, as this will push cells later in the series onto the other rows.
Here's another approach you could take which does not require two grid containers. In Material UI you can organise a grid into rows by using the fact that a row has 12 columns and making use of empty grid items (as Material UI does not support offset grid items) e.g.
<Grid container spacing={24}>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 1, 1</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 2, 1</Paper>
</Grid>
<Grid item xs={4} />
{/* 12 Columns used, so next grid items will be the next row */}
{/* This works because Material UI uses Flex Box and flex-wrap by default */}
<Grid item xs={4}>
<Paper className={classes.paper}>Grid cell 1, 2</Paper>
</Grid>
<Grid item xs={8} />
</Grid>
You can see this working here.
Indeed this is actually demonstrated on the Material UI websites (though without the offsets) here.
I admit though that I'd prefer to see semantic Row and Column elements in Material UI (e.g. like in Bootstrap), but this is not how it works.
You can do something like this
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
<Grid container item xs={12} spacing={3}>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
<Grid container item xs={12} spacing={3}>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</Grid>
</Grid>
I created new component to solve this problem:
export const GridBreak = styled.div`
width: 100%
`;
Then your code would look like this:
<Grid container>
<Grid item xs={4} />
<Grid item xs={4} />
<GridBreak />
<Grid item xs={4} />
</Grid>