I've read about autoFlow propert and gap. They are not working the way I'm using them.
Specifically the Elements appear vertically centered only if I use gap=20, gap values of 19 or 21 align all content at the top.
This is my code:
return (
<Box
display={{ md: "flex" }}
alignItems="center"
minHeight="70vh"
gap={8}
mb={8}
w="full"
>
<Box>
<Grid gap={20}>
<Heading as="h2" fontSize={{ base: "lg", sm: "3xl" }}>
Text
</Heading>
<Form>
...Boxes
</Form>
</Grid>
</Box>
</Box>
);
Sources: https://chakra-ui.com/docs/layout/grid
Related
I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423
<Box
sx={{ flexGrow: 1 }}
m={5} pt={5}
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
>
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
<SearchIcon style={{ coSelf: "center", margin: "5px" }} />
<TextField
id="standard-search"
label="Search for a company..."
type="search"
variant="standard"
textAlign="center"
fullWidth
/>
</Grid>
<Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
<SettingsIcon/>
</Button>
</Box>
Any help is appreciated.
Seems your search component is rendered but hiding behind the Stock Market Charting header as it gets longer in smaller screen sizes. If you have it as a fixed position try changing it to relative position, or remove/reduce the text inside it so it gets shorter for a quick test and might reveal the search component.
I've created a grid that displays cards using MUI, but the cards are 'stuck' to the left side of the page. I've tried justify='center', mx: 'auto' and alignItems='center' but the cards stay stuck to the left. I'm sure I'm using some prop that overrides my attempts, but I can't find documentation that speaks to my issue. Below is the code:
export default function Home() {
return (
<Box sx={{ flexGrow: 1, mt: 6 }}>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid item xs={2} sm={4} md={4} key={index}>
<ProductCard />
</Grid>
))}
</Grid>
</Box>
);
}
Below is what React is rendering.
you can to in grid like this:
<Grid item xs={2} sm={4} md={4} key={index} alignItems="center" justify="center">
<ProductCard />
</Grid>
I want to dynamically generate a page in the Next-JS app. Inside this page should be imported automatically Icons which fetches from the server Instead of writing it statically:
{
"id": 1,
"title": "Budget",
"value": "$24K",
"persent" :"12%",
"duration" :"Since Last Month",
"icon":"MoneyIcon",
"rise":"false"
},
in this timeMoneyIcon from Material-UI.
In this case, was used map method in order to render fetched data.
How can I put this fetched icon name as a tag same as <MoneyIcon/> in the component?
{posts.map((post) => (
<>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Card sx={{ height: "100%" }}>
<CardContent>
<Grid container spacing={3} sx={{ justifyContent: "space-between" }}>
<Grid item>
<Typography color="textSecondary" gutterBottom variant="overline">
{post.title}
</Typography>
<Typography color="textPrimary" variant="h4">
{post.value}
</Typography>
</Grid>
<Grid item>
<Avatar
sx={{
backgroundColor: "error.main",
height: 56,
width: 56,
}}
>
**<MoneyIcon />**
</Avatar>
</Grid>
</Grid>
<Box
sx={{
pt: 2,
display: "flex",
alignItems: "center",
}}
>
<ArrowDownwardIcon color="error" />
<Typography
color="error"
sx={{
mr: 1,
}}
variant="body2"
>
{post.persent}
</Typography>
<Typography color="textSecondary" variant="caption">
{post.duration}
</Typography>
</Box>
</CardContent>
</Card>
</Grid>
</>
))}
If I understand you correctly you are trying to pass the MUI Icon to the Component and render the icon. For that you can simply pass the Icon as a value of your object wrapped in a React Fragment.
import AccountBalanceIcon from '#mui/icons-material/AccountBalance';
const myObject = {
id: 1,
value: "24K",
icon: <><AccountBalanceIcon/></>
)};
export default function MyComponent(props) {
return(
<div>
<span>{myObject.value}</span>
{myObject.icon}
<div>
)
}
You can import them dynamically by name for example you can fetch the Icon name from server then in the page do this:
import * as MuiIcons from '#mui/icons-material'
function YourPage({IconName}){
const IconComponent = MuiIcons[IconName]
return <Grid container>
<IconComponent />
</Grid>
}
and if you want for example #mui/icons-material/Memory the Icon name is "Memory".
But I think this approach is not treeshakable you may bring the entire jungle , I am not sure about that though, you should check the bundle after compiling.
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
The grid system is 12, how can I evenly put 5 items in a row? 2.4 doesn't work... Thanks in advance :)
my code:
<Grid container spacing={10}>
{data.map(item => (
<Grid item xs={12} md={2.4}>
<div style={{ fontWeight: "700", textTransform: "capitalize" }}>
{item}
</div>
</Grid>
))}
</Grid>
See the Auto Layout section from the docs for an example of how to do this.
For your code, I believe the following should work:
<Grid container spacing={10}>
{data.map(item => (
<Grid item xs={12} md> // should also add a "key" prop here
<div style={{ fontWeight: "700", textTransform: "capitalize" }}>
{item}
</div>
</Grid>
))}
</Grid>
You can try adding <Grid lg={12/5}></Grid. this case works if you want to show 5 elements in one row
Make your Grid container flex direct to raw and give each item xs={2} for all of them to fit, also you can add some spacing and center elements to container itself. In case you want each item be bigger then 2, consider wrap the row in a ScrollY custom component
<Grid container spacing={1} direction="row" justify="center" alignItems="center" >
{data.map(item => (
<Grid item xs={2}}>
<div style={{ fontWeight: "700", textTransform: "capitalize" }}>
{item}
</div>
</Grid>
))}
</Grid>
// optional ScrollY wrapper, use like <ScrollY> {data.map ...}</ScrollY>
const ScrollY = (props) =>
<div style={{overflowX:'hidden', overflowY: 'scroll',dispaly:'none', height: '80%'}}>
{props.children}
</div>