I have the following code in reactjs using material ui theme
const useStyles = makeStyles((theme) => ({
root2: {
maxWidth: 345,
flexGrow: 1
},
paper2: {
padding: theme.spacing(1),
color: theme.palette.text.secondary,
}
})
<div className={classes.root2}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" spacing={3}>
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
What i want is
I saw an example at https://material-ui.com/system/flexbox/#flex-grow
which uses the code:
import React from 'react';
import Box from '#material-ui/core/Box';
export default function FlexGrow() {
return (
<div style={{ width: '100%' }}>
<Box display="flex" p={1} bgcolor="background.paper">
<Box p={1} flexGrow={1} bgcolor="grey.300">
Item 1
</Box>
<Box p={1} bgcolor="grey.300">
Item 2
</Box>
<Box p={1} bgcolor="grey.300">
Item 3
</Box>
</Box>
</div>
);
}
I am new to material ui. Here the example uses Box instead of Grid.
So which is the best way to handle this
I am used to bootstrap 4: IN bootstrap4 i can do this same thing using
https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content
<div class="d-flex justify-content-between">...</div>
How to do something like this in material UI
Adding justify="space-between" to Grid container component will solve your issue.
Please refer this.
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" justify="space-between">
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
Related
If I use grid within toggle buttons then OnChange event doesn't work
With using Grid or Stack event works fine
How I can arrange 2 by 2 buttons
I can't see any example on this on material ui website
Can anyone please help
const [testTime, setTestTime] = useState<string | null>('1');
const handleTestTime = (event: React.MouseEvent<HTMLElement>, newTime: string | null) => {
console.log(newTime);
setTestTime(newTime);
};
<Box>
<Typography variant="body2">
Toggle Button
</Typography>
<ToggleButtonGroup
value={testTime}
exclusive
onChange={handleTestTime}>
<Grid container spacing={1}>
<Grid item xs={6}>
<ToggleButton value="earlymorning">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Early Morning</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="morning">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Morning</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="afternoon">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Afternoon</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="evening">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Evening</Typography>
</Stack>
</ToggleButton>
</Grid>
</Grid>
</ToggleButtonGroup>
</Box>
The toggle buttons aren't designed to wrap. You can however make them wrap with:
<ToggleButtonGroup
sx={{ flexWrap: "wrap"}}
...>
Here is an example:
https://codesandbox.io/s/happy-https-366fsv?file=/demo.tsx:775-798
However, you'll see the spacing is a bit off, and so is the border on the item where the column breaks. I'd love it if someone had a clever way to make this look good too-
I got the error while using Material-UI in react
<Grid container justify="center">
<Box className={classes.box}>
<Grid item className={classes.item1}>
<Typography variant="h5" className={classes.loginTitle}>
Login
</Typography>
<Typography variant="body1" className={classes.subTitle}>
to continue to Program
</Typography>
</Grid>
{renderForm(window.location.pathname)}
<Grid
item
className={classes.component}
alignItems="center"
justify="space-between"
>
<Typography
variant="body2"
color="primary"
className={classes.createAccountLink}
>
<Link
style={{ cursor: "pointer" }}
onClick={(e) => e.preventDefault()}
>
Create account
</Link>
</Typography>
<Button
variant="contained"
color="primary"
disableElevation
className={classes.btn}
>
Login
</Button>
</Grid>
Grid uses CSS flexbox for layout. You cannot set alignItems in a Grid item, it must be placed in a Grid container. See this interactive example to know how to use alignItems in
Grid.
// invalid
<Grid container>
<Grid item alignItems="center">
</Grid>
</Grid>
// valid
<Grid container alignItems="center">
<Grid item>
</Grid>
</Grid>
I am trying to make a grid of buttons aligned in specific order, but I am having difficulties with making both buttons on the same row:
Expected:
Instead, row2 (the two columns in red), appear in a column direction (the second column goes bellow the first columnt, screenshot: http://prntscr.com/x4amxf) and not in a row direction like I am expecting them to be.
Here is my grid:
<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
<Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine
// picture represents this grid
<Grid item container direction="row" spacing={1}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
I have tried to increase xs to 2 to see if its a size issue, but it just stretched the items.
And the actual code (but the structure above represents the same):
<Grid container direction="column">
<Grid item container>
</Grid>
<Grid item container direction="row" spacing={1}>
<Grid item>
<AddPrice open={open} handleClosePopup={handleClose} item={item} />
<IconButton variant="contained" onClick={handleClose}>
<AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
<Typography>Цена</Typography>
</IconButton>
</Grid>
{item.prices.map(({ price, quantity }) => (
<React.Fragment key={`itemPrice1${price}`}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item>
<Button>
<Grid item direction="column" container>
<Grid item>
<Typography variant="button">{price} лв.</Typography>
</Grid>
<Grid item>
<Typography variant="button">
{quantity.available} {item.quantity.type}.
</Typography>
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
{editing && (
<Grid item container direction="column">
<Grid item>
<IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
<DeleteForever color="secondary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
<Grid item>
<IconButton style={{ border: "1px solid #3f51b5" }}>
<EditIcon color="primary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
</Grid>
)}
</Grid>
</React.Fragment>
))}
</Grid>
<Grid item container></Grid>
</Grid>
Basically, the editing buttons, should appear on the right of the price buttons.
Sandbox: https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js
If I understood the task correctly, you have to refactor your layout like this:
<Grid container direction="column">
<Grid item container direciton="row">
Row1
</Grid>
<Grid align="center" direction="row" container>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>BR</Grid>
<Grid item>TXT</Grid>
</Grid>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>EDIT</Grid>
<Grid item>DELETE</Grid>
</Grid>
</Grid>
</Grid>
Please, check out the example
I have the following code that has a paper component in a nested grid:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
Container,
AppBar,
Toolbar,
IconButton,
Typography,
Button,
Paper,
Grid,
Avatar,
} from '#material-ui/core';
import MenuIcon from '#material-ui/icons/Menu';
function App() {
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6">AwesomeApp</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Container style={{marginTop: '1em'}}>
<Grid container spacing={2}>
<Grid item container alignItems="center" xs={4}>
<Paper>
<Grid item xs={6} alignItems="center">
<Avatar>JD</Avatar>
</Grid>
<Grid item xs={6} alignItems="center">
John Doe
</Grid>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={2}>
<Paper>xs=6</Paper>
</Grid>
</Grid>
</Container>
</div>
);
}
export default App;
However, it seems that the paper component doesn't allow the grid to stretch out to occupy all of it's space as I would expect:
How do I get the paper element to take up the space of its container?
If you set the height and width to 100% on the Paper elements, they will use up the full space of the Grid items as desired.
import React from "react";
import ReactDOM from "react-dom";
import {
Container,
AppBar,
Toolbar,
IconButton,
Typography,
Button,
Paper,
Grid,
Avatar
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
paper: {
width: "100%",
height: "100%"
}
});
function App() {
const classes = useStyles();
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6">AwesomeApp</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Container style={{ marginTop: "1em" }}>
<Grid container spacing={2}>
<Grid item container alignItems="center" xs={4}>
<Paper className={classes.paper}>
<Grid item xs={6} alignItems="center">
<Avatar>JD</Avatar>
</Grid>
<Grid item xs={6} alignItems="center">
John Doe
</Grid>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>xs=2</Paper>
</Grid>
</Grid>
</Container>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
You might want to add an other container inside container to things to look more compact.
Try code below,
function App() {
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6">AwesomeApp</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Container style={{ marginTop: "1em" }}>
<Grid container spacing={0}>
<Grid item container alignItems="center" xs={1}>
<Paper>
<Grid item xs={6} alignItems="center">
<Avatar>JD</Avatar>
</Grid>
<Grid item xs={6} alignItems="center">
John Doe
</Grid>
</Paper>
</Grid>
<Grid container spacing={0} xs={11}>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
</Grid>
</Grid>
</Container>
</div>
);
}
I have also created a live sandbox for you: https://codesandbox.io/s/lucid-blackwell-411ds?fontsize=14&hidenavigation=1&theme=dark
I'm trying to generate a grid that is three deep. Example below:
I want the black box to stretch the length of the screen, and the three boxes to be aligned on the same row. I have put the three boxes in another grid that will go to a max-width of 1200px. this is so it looks neat on large screens. I want the three boxes to stack on mobile.
below is my code
const Landing = (props) => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
blackBox:{
color:'white',
backgroundColor:'black',
width:'100%',
},
white:{
color:'white',
}
}));
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Container>
</Grid>
</div>
);
}
export default Landing;
The issue is when I add the element that only allow the three boxed to go max 1200 they all stack. When I remove it they don't stack but stretch the full with of the screen.
can anyone point me in the right direction?
You should put the Container outside the Grid
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid container>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Grid>
</Container>
</Grid>