I am trying to stretch the Grid component when one of the Card component has extra text.
Please find the sample code here:
https://codesandbox.io/s/mediacard-demo-material-ui-forked-xpme4r?file=/demo.js:283-290
When i change the alignItems to "flex-end" or "center" it works.
But alignItems: "stretch" not working.
Using MUI Version5
Any suggestions would be helpful.
The Problem is Solved
I added the heights to the card and made it responsive
It Might be helpful to you
import React from "react";
import { Grid, Card } from "#mui/material";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
stretch: {
height: "100%"
}
}));
export default function MediaCard() {
const classes = useStyles();
return (
<Grid container spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card A</CardContent>
<CardActions>
Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions
</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent> Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
</Grid>
);
}
Related
Getting class as undefined for img tag in react.js
This is the component Header.jsx,
Here is the Header.jsx I'm using <img>, but the CSS properties are not not being implemented in the image, and I'm getting error as class=undefined
import React from 'react';
import classes from './header.css';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
This is the css file for the header
/* header.css */
.header__logo{
height: 20px;
width: 50px;
}
In the console I'm getting this error, class="undefined"
<img src="./images/logo.svg" class="undefined" alt="Logo">
Just do like that:Basic Concept
import React from 'react';
import './header.css';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className="header__logo" alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
When im doing this naming convention I make sure there's a parent tag with the classname you're trying to extend, in this case "header", also helps if your using SCSS with this, try something like this:
import React from 'react';
import classes from './header.scss';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<div className={`${classes.header}`>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
Inside your './header.scss'
.header {
// css style for header class
&__logo {
// css style code for logo class
}
}
I find, it returns undefined because it wasn't properly placed in the correct spot within your style sheet. Your react code looks good just missing a few things.
I have 3 components on my react page
PageHeader,SideMenu & FeatureList (which is made up of Display Cards) here are the components below:-
App.js
import './App.css';
import { Grid } from '#mui/material';
import SideMenu from './components/home/SideMenu';
import Features from './components/home/Features';
import PageHeader from './components/home/PageHeader';
function App() {
return (
<Grid container spacing={10}>
<Grid item xs={3}>
<PageHeader></PageHeader>
<SideMenu></SideMenu>
</Grid>
<Grid item xs={8}>
<Features></Features>
</Grid>
</Grid>
// <div>
// <PageHeader></PageHeader>
// <SideMenu></SideMenu>
// <Features></Features>
// </div>
);
}
export default App;
PageHeader.js
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
import { Grid } from '#mui/material';
var LOGGED_IN = false
const getButtons = (LOGGED_IN) => {
if (LOGGED_IN) {
return <Grid container>
<Grid item xs={7}></Grid>
<Grid item xs={2} >
<Button color="inherit">
<Typography variant="h6" component="div">
Profile
</Typography>
</Button>
</Grid>
<Grid item xs={2} >
<Button color="inherit">
<Typography variant="h6" component="div">
Logout
</Typography>
</Button>
</Grid>
</Grid>
}
else
return <Grid container>
<Grid item xs={9}></Grid>
<Grid item xs={2}>
<Button color="inherit">
<Typography variant="h6" component="div">
Login
</Typography>
</Button>
</Grid>
</Grid>
}
const drawerWidth = 240
export default function PageHeader(props) {
return (
<Grid item container>
<Grid container>
<AppBar
sx={{
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
}}
>
<Toolbar>
<Grid item xs={4}>
<Typography variant="h3" component="div">
Stonks!
</Typography>
</Grid>
{getButtons(LOGGED_IN)}
</Toolbar>
</AppBar>
</Grid>
</Grid>
);
}
SideMenu.js
import * as React from 'react';
import { Divider, Drawer, Grid, List, ListItem, ListItemIcon, ListItemText } from '#mui/material';
import { styled, useTheme } from '#mui/material/styles';
import BusinessIcon from '#mui/icons-material/Business';
import ShowChartIcon from '#mui/icons-material/ShowChart';
import AppsIcon from '#mui/icons-material/Apps';
import SupervisedUserCircleIcon from '#mui/icons-material/SupervisedUserCircle';
import InfoIcon from '#mui/icons-material/Info';
import CreateIcon from '#mui/icons-material/Create';
const DrawerHeader = styled('div')(({ theme }) => ({
...theme.mixins.toolbar,
}))
const drawerWidth = 240
export default function SideMenu(props) {
const theme = useTheme();
const [open, setOpen] = React.useState(true)
const handleDrawerOpen = () => {
setOpen(true)
}
const handleDrawerClose = () => {
setOpen(false)
}
return (
<Grid container spacing={2}>
<Grid item xs={12} container direction="column">
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
boxSizing: 'border-box',
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="persistent"
anchor="left"
open={true}
>
<Grid item xs={0} container display='flex' alignItems='center' justifyContent='flex-end'>
<DrawerHeader display='flex'>
</DrawerHeader>
</Grid>
<Grid item xs={0}>
<Divider />
</Grid>
<Grid item container direction='column'>
<List>
{
['Companies', 'Exchanges', 'Sectors', 'Users'].map((text) => (
<Grid item xs={12}>
<ListItem button key={text}>
<ListItemIcon>
{(() => {
switch (text) {
case 'Companies':
return <BusinessIcon />
case 'Exchanges':
return <ShowChartIcon />
case 'Sectors':
return <AppsIcon />
case 'Users':
return <SupervisedUserCircleIcon />
}
})()}
{/* <MenuIcon /> */}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
</Grid>
))
}
</List>
</Grid>
<Grid item>
<Divider />
</Grid>
<Grid item container direction='column'>
<List>
{
['About', 'Creators'].map((text) => (
<Grid item xs={12}>
<ListItem button key={text}>
<ListItemIcon>
{(() => {
switch (text) {
case 'About':
return <InfoIcon />
case 'Creators':
return <CreateIcon />
}
})()}
{/* <MenuIcon /> */}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
</Grid>
))
}
</List>
</Grid>
</Drawer>
</Grid>
</Grid>
);
}
Features.js
import { Grid } from "#mui/material";
import React from "react";
import DisplayCard from "./DisplayCard";
import company from '../../static/company.jpg'
import stock_exchange from '../../static/stock_exchange.jpg'
import sector from '../../static/sector.png'
import user from '../../static/user.png'
export default function Features(props) {
return (
<Grid container spacing={3}>
<Grid item md={3}>
<DisplayCard name="Companies" brief="View All the Registerd Companies and Click on them to explore each of them in
detail" image={company}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Stock Exchanges" brief="View All the Registerd Stock Exchanges and Click on them to explore each of them in
detail" image={stock_exchange}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Sectors" brief="View All the Registerd Sectors and Click on them to explore each of them in
detail" image={sector}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Users" brief="View All the Registerd Users and Click on them to explore each of them in
detail" image={user}></DisplayCard>
</Grid>
</Grid>
)
}
DispalyCard.js
import React from "react";
import Card from '#mui/material/Card';
import CardContent from '#mui/material/CardContent';
import CardMedia from '#mui/material/CardMedia';
import Typography from '#mui/material/Typography';
import { Button, CardActionArea, CardActions, Grid } from '#mui/material';
export default function DisplayCard(props) {
return (
<Grid container spacing={2}>
<Card sx={{ border: "groove", maxWidth: 300, maxHeight: 400 }}>
<CardActionArea >
<Grid item xs={12}>
<CardMedia
component='img'
height='140'
image={props.image}
width='inherit'
/>
</Grid>
<Grid item container>
<CardContent>
<Grid item xs={12}>
<Typography gutterBottom variant='h4' component='div'>
{props.name}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='body2' color='text.secondary'>
{props.brief}
</Typography>
</Grid>
</CardContent>
</Grid>
</CardActionArea>
<Grid>
<CardActions>
<Button size='small' color='primary'>
Click Here
</Button>
</CardActions>
</Grid>
</Card >
</Grid >
);
}
Currently my output is
As u can see the Feature Cards are getting overlapped by the Header
I want to make them not overlap but I have tried a lot of things but as I am a beginner in Grid & Flexbox im not able to make it correct
Any help will be appreciated.
It looks like you have your header set to position: fixed which removes it from the normal flow of the page. There may be a more elegant solution but so far the best solution for me has been adding the following to my CSS:
body {
padding-top: *height of header*;
}
I am new in React and I am trying to align the component at a particular place but I am not able to do so.
import React from "react";
import "./styles.css";
import { Typography, Container, Grid, Button } from "#material-ui/core";
import useStyles from "./styles";
function Home() {
const classes = useStyles;
return (
<div className={classes.root}>
<Grid container>
<Grid item sm={6} xs={12}>
<Typography variant="h3" color="textPrimary" gutterBottom>
Hello, there.
</Typography>
<Typography variant="h5" paragraph>
I need to put this in the centre of the shaded region.
</Typography>
</Grid>
</Grid>
<div>
<Grid item sm={3} xs={6}>
<Button variant="contained" color="primary" disableElevation>
download
</Button>
</Grid>
</div>
</div>
);
}
I am using useStyles Hooks to do so.
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
top: "50%"
}
}));
export default useStyles;
But it is not working, is there a way to solve this?
It's not clear what you want to achieve, but I think this article about flex layout will help you understand how to position elements.
and try the following maybe it's what you want:
import React from "react";
import "./styles.css";
import { Typography, Container, Grid, Button } from "#material-ui/core";
function Home() {
return (
<Grid container style={{
justifyContent: "center"
}}>
<Grid container style={{
backgraoundColor: "blue",
maxWidth: "700px",
alignItems: "center",
justifyContent: "center"
}}>
<Typography variant="h3" color="textPrimary" gutterBottom>
Hello, there.
</Typography>
<Typography variant="h5" paragraph>
I need to put this in the centre of the shaded region.
</Typography>
<Button variant="contained" color="primary" disableElevation>
download
</Button>
</Grid>
</Grid>
);
}
Wrap your content into a div and apply following styles to it
shaded_region{
display:flex,
justify-content:"center",
}
I have been pulling my hair out trying to get these material-ui cards to go in a row direction with my grid - I have used these before and had no issues making them lineup in a row direction rather than in a column direction and my code is the same as I used before.
Please let me know what mistakes I have made or solutions you know of!
Just a side note the direction, wrap, justify and alignitems properties I added to the grid have made no difference at all.
Hero.js
import { Grid, makeStyles } from '#material-ui/core'
import React from 'react'
import MediaCard from './Card'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function Hero() {
const classes = useStyles();
return (
<div className="Hero">
<div className={classes.root}>
<Grid
Container spacing={2}
className="hero-section"
direction="row"
wrap="nowrap"
justify="center"
alignItems="center"
>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
</Grid>
</div>
</div>
)
}
export default Hero
I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.
The not working code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import CssBaseline from "#material-ui/core/CssBaseline";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
alignItems: "stretch"
},
column: {
flexDirection: "column"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default props => {
const classes = useStyles();
return (
<>
<CssBaseline />
<Grid container className={classes.root}>
{/* COLUMN ONE */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid container item>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 left</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 right</Paper>
</Grid>
</Grid>
</Grid>
{/* COLUMN TWO */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
</Grid>
</Grid>
</>
);
};
Obligatory codesandbox is here.
Could someone explain me what am I doing wrong here?
There's a bug with Material UI way of laying out nested grid containers, here. The workaround - found by #londonoliver - is to nest containers inside the grid items:
<Grid container direction="row">
<Grid item>
<Grid container direction="column">
<Grid item>1</Grid>
<Grid item>2</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>3</Grid>
<Grid item>4</Grid>
</Grid>
</Grid>
</Grid>