I made a multi-card grid layout with Mui grid
I want to limit the grid box to a particular region on screen, something like:
the user should have to scroll to see the rest
This is the code that doesn't work as I want it to
return (
<Box className={classes.pageContainer}>
<Typography className={classes.backgroundText}>WORKS</Typography>
<Box sx={{ height: '600px' }}>
<Grid container spacing={6} className={classes.gridContainer} justifyContent="center">
{temporaryVideos.map((cardInfo, ndx) => {
return (
<Grid item>
<VideoCard cardInfo={cardInfo} index={ndx} />
</Grid>
);
})}
</Grid>
</Box>
</Box>
);
Thanks in advance
Rafael
I did it
I placed an "overflowY: 'auto'" on the grid container
Related
I am trying to get the grid item containing the scrollable list to shrink so the back button is just below the list.
Following is the code, and a link to CodeSandbox. There is a lot of grid and box components surrounding the list. These are extracts from other parent components so I get it all in one file for simplicity.
https://codesandbox.io/s/y2c9sn?file=/src/App.js
import * as React from "react";
import {
Box,
Button,
Grid,
List,
ListItem,
ListItemText,
ListItemButton,
AppBar,
Toolbar,
Typography,
} from "#mui/material";
const usersList = [
"user1",
"user2",
"user3",
"user4",
"user5",
"user6",
"user7",
"user8",
"user9",
"user10",
];
function App() {
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
height: "100vh",
}}
>
<Grid container justifyContent="center">
<Grid item xs={12} md={8}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Scrollable List</Typography>
</Toolbar>
</AppBar>
</Grid>
<Grid item xs={12} md={8}>
<Box>
<Grid container justifyContent="center">
<Grid item xs={12}>
<List sx={{ maxHeight: "50%", overflow: "auto" }}>
{usersList.map((user, index) => {
return (
<ListItem disablePadding key={index}>
<ListItemButton>
<ListItemText>{user}</ListItemText>
</ListItemButton>
</ListItem>
);
})}
</List>
</Grid>
</Grid>
<Grid container justifyContent="center">
<Grid item xs={8}>
<Button
name="back"
variant="contained"
color="primary"
value="back"
fullWidth
size="small"
>
Back
</Button>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
);
}
export default App;
Link to CodeSandbox
https://y2c9sn.csb.app/
You can move this style:
sx={{ maxHeight: "50%", overflow: "auto" }}
from your List component to its first parent Grid container.
This sandbox is the updated version of your sandbox with this change.
I have a code here for the video and login page template. However, as you can see it does not work? It goes to the top of the login page. When I was using a picture, it disappeared as stated. How can I force xs={} setting?
<Grid container component='main' className={classes.root}>
<CssBaseline />
<Grid item xs={false} sm={4} md={9}>
<BackgroundVideo />
</Grid>
<Grid
item
xs={12}
sm={8}
md={3}
component={Paper}
elevation={6}
square
className={classes.formBackground}
>
xs={false} means that there is no breakpoint, so it doesn't change sizing at this breakpoint. false is a default value for all breakpoints.
You can hide Grid item by wrapping it with a Box component.
<Box
component={Grid}
item
sm={4}
md={9}
display={{ xs: "none", sm: "block" }}
>
<BackgroundVideo />
</Box>
As the answer from Nikolai Kiselev mentioned, values of false or 0 will not hide the grid item.
The way I've been getting around this is by wrapping my grid items in a Hidden component like so (using your example as a base):
<Grid container component='main' className={classes.root}>
<CssBaseline />
<Hidden only='xs'>
<Grid item xs={false} sm={4} md={9}>
<BackgroundVideo />
</Grid>
</Hidden>
<Grid
item
xs={12}
sm={8}
md={3}
component={Paper}
elevation={6}
square
className={classes.formBackground}
>
Make sure to note that if you go with this approach, whatever value you pass in the breakpoints where the component will be hidden (xs in this example) will be ignored, since the component will be hidden.
Is there any way to remove the scrollbar, it is being added whenever I add the divider to my Home, right below the menu.
Here is the code
return (
<Box className={classes.root}>
<Grid item xs={12}>
<Header />
</Grid>
<Divider flexItem={true} className={classes.headerDivider}/>
<Grid item xs={12}>
{body}
</Grid>
<Grid item xs={12}>
<Footer/>
</Grid>
</Box>
);
}
}
Add css to hide horizontal scroll
.some-box-class {
overflow-x: hidden;
}
I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?
Since you are going to use this on a login page.
Here is a code I used in a Login page using Material-UI
MUI v5
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justifyContent="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
MUI v4 and below
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
this will make this login form at the center of the screen.
But still, IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.
As pointed by #max, another option is,
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
Please note that versions MUIv4 and below should use justify="center" instead.
However, using a Grid container without a Grid item is an undocumented behavior.
Update on 2022-06-06
In addition to that, another new and better approach will be using the Box component.
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
This was originally posted by Killian Huyghe as another answer.
Hope this will help you.
You can do this with the Box component:
import Box from "#material-ui/core/Box";
...
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
Another option is:
<Grid container justify = "center">
<Your centered component/>
</Grid>
Here is another option without a grid:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
The #Nadun's version did not work for me, sizing wasn't working well. Removed the direction="column" or changing it to row, helps with building vertical login forms with responsive sizing.
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Grid item xs={6}></Grid>
</Grid>;
If you just need to center a couple of items in a row or column in MUI v5, you can use Stack instead of Grid:
<Stack alignItems="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Another example with row direction:
<Stack direction="row" justifyContent="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Live Demo
With other answers used, xs='auto' did a trick for me.
<Grid container
alignItems='center'
justify='center'
style={{ minHeight: "100vh" }}>
<Grid item xs='auto'>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Log in with Google"
onSuccess={this.handleLogin}
onFailure={this.handleLogin}
cookiePolicy={'single_host_origin'}
/>
</Grid>
</Grid>
All you have to do is wrap your content inside a Grid Container tag, specify the spacing, then wrap the actual content inside a Grid Item tag.
<Grid container spacing={24}>
<Grid item xs={8}>
<leftHeaderContent/>
</Grid>
<Grid item xs={3}>
<rightHeaderContent/>
</Grid>
</Grid>
Also, I've struggled with material grid a lot, I suggest you checkout flexbox which is built into CSS automatically and you don't need any addition packages to use. Its very easy to learn.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Little update 07-09-2021 'justify' is now 'justifyContent="center"'
https://material-ui.com/components/grid/
The most versatile solution for me is using container and item props in combination.
The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.
Grid MUI documentation - https://mui.com/material-ui/react-grid/#responsive-values
<Grid container alignContent={'center'} xs={12}>
<Grid container item xs={6} justifyContent={'start'}>
<span> content one </span>
</Grid>
<Grid container item xs={6} justifyContent={'center'}>
<span> content two </span>
</Grid>
</Grid>
You can make this component and use it everywhere you want. also you can add your props:
import Box from '#mui/material/Box';
export default function Center(props: any) {
const { children } = props
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}}
{...props}
>
{children}
</Box>
);
}
just do style={{display:'flex';justifyContent:'center';alignItems:'center'}}
I'm using Material-UI version 1. installed by this command:
npm install -S material-ui#next
Everytime I want to use , an unwanted horizontal scroll appears in the page.
Code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';
const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'center',
color: theme.palette.text.secondary,
marginTop: "3rem"
},
}));
function Login(props) {
const classes = props.classes;
return (
<div className={classes.root}>
<Grid container gutter={24} justify='center'>
<Grid item xs={12} md={12} sm={12} lg={12}>
<NavMenu/>
</Grid>
<Grid item xs={6} sm={6} md={6} lg={6}>
<Paper className={classes.paper}>
<LoginPanel />
</Paper>
</Grid>
</Grid>
</div>
);
}
Login.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styleSheet)(Login);
Bootstrap and other grid layout options are in conflict with this library. When I use <Grid> in other parts of a component(for example in drawer), horizontal scroll appears makes the UI ugly
NavMenu and LoginPanel are some self-made components and they work and using them without doesn't cause horizontal scroll.
I had the same issue. I figured out a couple solutions but neither feel very elegant:
Disable spacing
Unfortunately this removes all padding from child grid items within the container:
<Grid container
spacing={0}>
Manually fix the CSS
This is what I ended up doing:
<Grid container
style={{
margin: 0,
width: '100%',
}}>
Copied the easy solution from comment:
added xs={12} to <Grid container>
<Grid container spacing={3} xs={12}>
credit to https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645
This is caused by spacing. Sometimes we can still use spacing by limiting the Grid under a Container.
<Container maxWidth={false}>
<Grid container spacing={6}>
Omit
</Grid>
</Container>
The best solution here is to wrap the grid in a container with the max width
<Container>
<Grid container spacing={2}>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
</Grid>
</Container>
This way the overflow is taken care by the container and the grid always expands responsively into the parent. This by far is the most elegant solution I have found.
Tip: If your are using this library to create something like a dashboard then always have the parent for content area as <Container>, This way the overflow problem never occurs. Give it a shot. Worked well for me after struggling for some time and only finding non elegant solution everywhere. I must say this should be documented well in the react Material UI pages.
This worked for me!
<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>
The root issue is now fixed in the latest version of Material-UI (v5.0.0-alpha.30). See https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245.
I was facing the same issue. Remove spacing from the Grid container didn't solve it.
Solution:
Instead of setting with on the parent of the Grid container, setting maxWidth fixes the issues and assigns the desired width. For example, if we set maxWidth on the Box that is the parent of Grid container, then the Grid doesn't overflows horizontally.
We don't need to set width 100% on the Grid container because its purpose is to adapt to 100% width by default.
<Box style={{ maxWidth: 600}}>
<Grid container spacing={3}>
...
</Grid>
</Box>
well the idea i came up is
<Grid container>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
</Grid>
This is a known limitation of the grid with negative margins. https://material-ui.com/components/grid/#limitations.
Don't use Grid spacing and manually configure your spacing.
Add padding equal to at least half of the spacing to the parent, For Example:
12 = 3 (spacing) * 8 (theme spacing pixels) / 2
<Box p={12}> {/* or style={{ padding: 12 }} */}
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it changes the look of the component.
set overflow-x: hidden
<Box style={{overflowX: "hidden"}}>
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it (in my testing) causes issues with touchscreens trying to scroll vertically...
For some reason none of the answers worked for me, I fixed it in Container like this:
<Container component="div" sx={{ maxWidth: "100vw" }}>
<Grid container spacing={3}>
...
</Grid>
</Container>