How do I stack a CircularProgress component on top of a Typography component (both of which are in a Backdrop component)?
Currently, the progress component is on the left and the text is right next to the progress bar. I've attempted to use grid items/containers but no luck so far.
<Backdrop open={loading} style={{zIndex: 20, opacity: 0.8, backgroundColor: '#FFFF', color: '#0000'}}>
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item sm={12} md={12} lg={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item sm={12} md={12} lg={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
</Backdrop>
You are probably having this issue on small screens because you do not have the xs prop set to take up the entire grid. To solve this issue, if you want the stacking to be consistent across all screen sizes, you can just use xs={12}
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item xs={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item xs={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
Related
I am trying to use MUI Card in Grid layout
<Grid container spacing={5} alignContent="center" alignItems="center" justifyContent="center" columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={4} md={6} alignItems="center">
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
</Grid>
But the problem is its not center aligns with in each grid item. I have added border for each item
What I did wrong?
Also as you can see the grid overlap on the title above
I'm trying to put two centered paragraphs into a column <Grid>, separated by a vertical <Divider>. I added the divider as a Grid item, but the divider appears justified to the right instead of the center, between the two paragraphs. Here is my code:
<Grid item container direction="row" spacing={{ xs: 1, md: 3 }}>
<Grid item xs={5}>
<Typography variant="body2" align="center">
Paragraph A text
</Typography>
</Grid>
<Grid item xs={2}>
<Divider orientation="vertical" />
</Grid>
<Grid item xs={5}>
<Typography variant="body2" align="center">
Paragraph B text
</Typography>
</Grid>
</Grid>
With this code, the vertical divider is justified to the right. There is no change if I add justifyContent="center" to the container Grid, I assume because the divider is a right border. I think I need to add padding-right somehow, but calculated so that it is responsive to different screen widths. Any help would be much appreciated!
you need to remove spacing={{ xs: 1, md: 3 }} or change it
and for change Divider orientation use container in grid :
<Grid item container direction="row" >
<Grid item xs={5}>
<Typography variant="body2" align="center">
Paragraph A text
</Typography>
</Grid>
<Grid item xs={2}
container
direction="row"
justifyContent="center"
alignItems="center"
>
<Divider orientation="vertical" style={{height:'100%',width:'1px'}}/>
</Grid>
<Grid item xs={5}>
<Typography variant="body2" align="center">
Paragraph B text
</Typography>
</Grid>
</Grid>
codesandbox
I'm working on a reactjs project and I need to display "books" in a row. I'm using Material UI grid system. I succeeded in showing the books on a big screen. However, The "books" overlapse when the screen gets smaller. I'm trying to make the row horizontally scrollable in the <Paper> component when the screen gets smaller without the overlapse occuring.
Here is my code with dummy data and codesandbox.
<Paper elevation={4} className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">
Most Popular Books Of All Times
</Typography>
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
<Typography >
Test Test Test Test Test Test Test Test Test
</Typography>
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
</Grid>
</Paper>
add width: max-content; in the style of your main Grid tag
so I have this annoying issue I can't find a result for.
I'm new to material-ui and it feels like I'm missing something here...
I just want a divider between the grid items, without it breaking the order of the grid. What am I missing?
Sandbox: https://vpbyd.csb.app/
import React from "react";
import "./styles.css";
import {Grid, Typography, Divider} from '#material-ui/core'
export default function App() {
return (
<div className="App">
<Grid container spacing={3}>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Two
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Three
</Typography>
</Grid>
</Grid>
<Grid container spacing={0} alignItems="center">
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}>
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>
</Grid>
</div>
);
}
I had the same issue and found a trick : add a negative right margin to your Divider
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
Try putting the divider inside of a grid container of its own.
<Grid item xs={2}>
<Divider orientation="vertical" flexItem/>
</Grid>
The material ui grid uses flexbox so dropping an item inside of it that does not have the correct properties is going to mess up the grid.
A good generic solution to me is adding this global style
.MuiGrid-container > .MuiDivider-vertical.MuiDivider-flexItem {
margin-right: -1px;
}
in conjunction with adding the JSX property flexItem to the Divider:
<Grid container>
<Grid item xs={4}>
...
</Grid>
<Divider flexItem orientation="vertical" />
<Grid item xs={8}>
...
</Grid>
</Grid>
That's a clean, transparent workaround to me which keeps the grid flowing as expected.
None of those solutions above were ideal for me, so I ended up simulating a Divider by showing the right side left border (you could obviously also do it by showing the left side right border), with the same CSS properties that the Divider uses. Here's a small example:
<Grid
container
direction="row"
justifyContent="space-evenly"
alignItems="top"
>
<Grid
item
xs={6}
style={{
paddingRight: '10px',
}}
Left Side
</Grid>
<Grid
item
xs={6}
style={{
paddingLeft: '10px',
borderStyle: 'solid',
borderColor: 'rgba(0, 0, 0, 0.12)',
borderWidth: '0 0 0 1px'
}}
>
Right Side
</Grid>
</Grid>
note that you are passing 14 column in total to de grid container, at least on the sandbox. Anyway sometimes it happen with 12 columns, it work for me to pass empty breakpoints props at the last grid item, or even for all the Grid Items in your case will be:
import React from "react";
import "./styles.css";
import { Grid, Typography, Divider } from "#material-ui/core";
export default function App() {
return (
<div className="App">
<Grid container spacing={3}>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Two
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Three
</Typography>
</Grid>
</Grid>
<Grid container spacing={0} alignItems="center">
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item **xs**>
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>
</Grid>
</div>
);
}
This will say to the item to occupy all the available space.
The problem is that giving the 12 columns you are stablishing the 100% of the available space, and adding a divider then you have 100% + 1px. normally without grid you'll need to set a calc(100% - 1px).
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>