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
Related
<Container maxWidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
<Grow in>
<Container>
<Grid
container
justifyContent="space-between"
alignItems="stretch"
spacing={3}
>
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={7}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
I'm new to mui and following a tutorial.The problem is in tutorial the form
grid item is coming in row and here it is showing me vertically. I don't know what the issue is how can i align it horizontally
I'm trying to have two columns with MUI grid. One column containing two boxes that take up 9/12 and then one column taking up 3/12 with 100% vh.
I've come close but can't get the second column to align to the top of the page.
<Grid container spacing={1}>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.welcomeBar}>
<p className={classes.welcomeHeader}> Welcome back SpongeBob! </p>
</Card>
</Grid>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.sectionHeight}>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Grid>
<Grid container item xs={12} sm={5} lg={3}>
<Card className={classes.tipsHeight}>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>
I think you just need to adjust the layout a little... effectively you've got two grids, one that gives you the two-column layout, and then another grid inside the left-hand column that provides the rows. (Alternatively, you can use a Stack for the inner content layout of the left-hand column depending on what you want to put in there.)
<Grid container spacing={1} sx={{ width: '100vw', height: '100vh' }}>
<!-- LH column -->
<Grid container xs={12} sm={7} lg={9}>
<!-- LH column content - you can swap for another grid if you need -->
<Stack spacing={1} flex="1 1 0">
<Card>
<p> Welcome back SpongeBob! </p>
</Card>
<Card>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Stack>
</Grid>
<!-- RH column -->
<Grid container item xs={12} sm={5} lg={3}>
<Card>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>
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
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>
Using material UI for the styling.
Is it possible to place an HTML element or Typography element to the left side of a Grid and have it still be on the same line?
Here is a small snippet of the code.
return (
<Wrapper>
<form>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);
Lets say for example, I want to add a typography element and have it shown on the same line as grid items serviceDateOne and serviceDateTwo, what would that look like? I've tried
return (
<Wrapper>
<form>
<Typography>TEST</Typography>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);
Add the Typography element is displayed above the line where serviceDateOne and serviceDateTwo are. BTW, the component is just a styled div. The element is included as part of the Grid, what i'm trying to achieve is to place that element outside of the grid and to the left of the form, acting like side labels for that row, and only have the grid items as part of the grid
Grid is using for the seperation, so just make the seperation at the top level.
return (
<>
<Grid container spacing={1}>
<Grid item xs={3} style={{ backgroundColor: "lightgray" }}>
<Typography>TEST</Typography>
</Grid>
<Grid item xs={9}>
XXX
<Grid container spacing={1}>
<Grid item xs={12}>
YYY
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
</Grid>
</Grid>
</Grid>
</>
);
Update
Show two child in one line: ref QA
return (
<div style={{ display: "flex" }}>
<Typography style={{ backgroundColor: "lightgray", width: 100 }}>
TEST
</Typography>
<Grid container spacing={1} style={{ backgroundColor: "gray" }}>
<Grid item xs={12}>