I am working on a building a general layout for a web app. I have hit a problem I am not sure how to solve.
My Grid looks as follows:
What I want is that the each section inside the card start at the same point.
For example, the icons are ok as each their tops are aligned.
The titles are also ok as their tops are aligned.
However, the content text is not ok, as the tops are not aligned amongst the three cards.
In addition, the learn more buttons should also be aligned, and ideally stuck to the bottom of the card. As can be seen they all sit at different heights.
My code looks as follows:
HomeGrid.jsx:
import React, { useState, useEffect, Fragment } from 'react'
import { useStyles } from '../styles'
import SimpleCard from '../card/SimpleCard'
import { Grid, Container, Paper } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
import FindInPageIcon from '#material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '#material-ui/icons/AccountBalanceWallet'
const HomeGrid = () => {
const classes = useStyles()
return (
<Container disableGutters className={classes.homeGridContainer}>
<Grid
alignItems="stretch"
alignContent="center"
justify="center"
wrap="wrap"
container
spacing={10}
>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<QuestionAnswerIcon fontSize={'large'} />}
title={'Speak'}
content={'Speaking to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<FindInPageIcon fontSize={'large'} />}
title={'Finding someone like this example can be great'}
content={'Finding to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<AccountBalanceWalletIcon fontSize={'large'} />}
title={'No Fees Here'}
content={'No Fees shalt find thou'}
></SimpleCard>
</Grid>
</Grid>
</Container>
)
}
export default HomeGrid
SimpleCard.jsx:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Card from '#material-ui/core/Card'
import CardActions from '#material-ui/core/CardActions'
import CardContent from '#material-ui/core/CardContent'
import Button from '#material-ui/core/Button'
import Typography from '#material-ui/core/Typography'
import { CardActionArea, CardMedia } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
const useStyles = makeStyles({
simpleCard: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
})
const SimpleCard = (props) => {
const classes = useStyles()
return (
<Card style={{ height: '100%' }}>
<CardContent>
{props.icon}
<Typography variant="h6" component="h2">
{props.title}
</Typography>
<Typography variant="body1" component="p">
{props.content}
</Typography>
</CardContent>
<CardActions className={classes.actions}>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
)
}
export default SimpleCard
I already tried implementing this answer: enter link description here but as you can see it doesn't work.
Can someone please guide / help me out here?
using flex will solve the issue.
set flex style properties display:'flex', justiyContent:'space-between', flexDirection:'column' to Card component.
It'll shift buttons of all the Cards to the bottom of the card.
Related
I thought Material-UI grid items were just used for quick spacing fixes. My grid items are now showing up as cards? Would just like it to be invisible how it was, however the docs don't explain how to do this. Appreciate any help!
import React, { useState, useEffect } from "react";
import Grid from "#mui/material/Card";
import { Container, TextField, FormControl } from "#mui/material";
export default function MainPage() {
return (
<Container maxWidth="lg" style={{ height: "100vh" }}>
<Grid container>
<Grid item xs={12}>
<img
style={{ width: "800px" }}
src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
alt="half-title-1"
/>
</Grid>
<Grid item xs={12}>
<img
style={{ width: "800px" }}
src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
alt="half-title-2"
/>
</Grid>
</Grid>
</Container>
);
}
It's because you're importing a Card!
import Grid from "#mui/material/Card";
What it's supposed to be:
import Grid from "#mui/material/Grid";
I am developing an application in React and Material-ui that uses a card component to display some information. However, I am not the best at CSS and I am having trouble creating an overlay for the Card component while it is blurred out. I use the css property filter: blur(2px) in order to accomplish the blur, but whenever I add any CSS for the overlay it either puts the text under the card over above. My goal would be to have it centered in the middle of the card.
Code:
import { Grid, Typography, CardContent, Card } from '#material-ui/core';
import { makeStyles, useTheme } from '#material-ui/core/styles';
const useStyles = makeStyles(theme => ({
root:{
width: 400,
filter: "blur(3px)",
},
textOverlay: {
position: 'absolute',
top: 0,
left: 0
}
}));
const LandingPage = () => {
const classes = useStyles();
return (
<React.Fragment>
<Grid container direction="row" alignItems="center" justify="center">
<Grid item>
<Card className={classes.root}>
<CardContent>
<Typography variant="h4" align="center" >Monday</Typography>
<Typography>Song</Typography>
<Typography>Africa</Typography>
<Typography>Artist</Typography>
<Typography>Toto</Typography>
<Typography>Preview</Typography>
</CardContent>
</Card>
</Grid>
<Grid item>
<div className={classes.textOverlay}> Coming Soon </div>
</Grid>
</Grid>
</React.Fragment>
);
}
export default LandingPage;
That should do the trick. Just set the Grid item to position fixed. You may need to add the z-index. But in your example it wasn't needed.
I would also suggest to add the 'notSelectable' to your blurred content so that the user cant select it.
https://codesandbox.io/s/flamboyant-volhard-72wuh?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import { Grid, Typography, CardContent, Card } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
width: 400,
filter: "blur(3px)",
},
textOverlay: {
position: "fixed",
}
notSelectable: {
userSelect: "none"
}
}));
const LandingPage = () => {
const classes = useStyles();
return (
<React.Fragment>
<Grid container direction="row" alignItems="center" justify="center">
<Grid item>
<Card className={classes.root}>
<CardContent className={classes.notSelectable}>
<Typography variant="h4" align="center">
Monday
</Typography>
<Typography>Song</Typography>
<Typography>Africa</Typography>
<Typography>Artist</Typography>
<Typography>Toto</Typography>
<Typography>Preview</Typography>
</CardContent>
</Card>
</Grid>
<Grid item className={classes.textOverlay}>
<div> Coming Soon </div>
</Grid>
</Grid>
</React.Fragment>
);
};
export default LandingPage;
I'm having issues with changing <AppBar> background color. I'm using the Container component to set the maximum screen size.
This causes issues when the screen size is bigger than the maximum screen size. The AppBar background color is expected the rest is white.
How do I remove the white color and make it match the <AppBar> background color?
How do I get it so that white color to match the <AppBar> color so that the navigation looks consistent?
This is what I have so far:
import React from 'react';
import {CssBaseline, Container} from '#material-ui/core/';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<Container maxWidth="sm">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Container>
</div>
);
}
What am I missing?
The navigation looks wired because it's surrounded by white.
You can go in your css file and add:
body {
background-color: #FF0000;
}
Place the AppBar outside the div with the class of root or remove the width from root class.
ADDED:
<div>
<AppBar position="static">
<Toolbar style={{ maxWidth: 1280 }}>
// ...
</Toolbar>
</AppBar>
<Container>
// ...
</Container>
</div>
If I click to remove the first like on the first goal, I can see the Redux action firing (using Redux DevTools) for the like being updated. But the number beside is not updating. When I check the console it doesn't appear that anything is refreshing. When I refresh the page, it shows the updated number that was previously liked (the 0 becomes a 1), but I have to refresh the page to see this update. How can I get the number to update in real time without having to refresh the page?
import React, { useEffect } from "react";
import Moment from "react-moment";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { addLike, removeLike } from "../../actions/goal";
import { getGoals } from "../../actions/goal";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import ThumbUpAltIcon from "#material-ui/icons/ThumbUpAlt";
import ThumbDownAltIcon from "#material-ui/icons/ThumbDownAlt";
import ChatIcon from "#material-ui/icons/Chat";
import DeleteIcon from "#material-ui/icons/Delete";
import DoneIcon from "#material-ui/icons/Done";
import {
Typography,
Container,
CssBaseline,
makeStyles,
Grid,
Avatar,
Paper,
Button
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
paper: {
height: "auto",
marginBottom: theme.spacing(3)
},
actionButtons: {
marginTop: "3vh"
},
profileHeader: {
textAlign: "center",
marginBottom: 20
},
avatar: {
width: theme.spacing(7),
height: theme.spacing(7)
}
}));
const Goals = ({
getGoals,
auth,
addLike,
removeLike,
goal: { goals, user, loading }
}) => {
useEffect(() => {
getGoals();
}, [getGoals]);
const classes = useStyles();
return loading ? (
<>
<Navbar />
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Spinner />
</div>
</Container>
</>
) : (
<>
<CssBaseline />
<Navbar />
<main>
<Container>
<Typography variant="h2" className={classes.profileHeader}>
Goals
</Typography>
{/* parent grid */}
<Grid container spacing={4}>
{goals.map(singleGoal => (
<Grid
className={classes.paper}
key={singleGoal._id}
spacing={1}
container
item
direction="row"
alignItems="center"
component={Paper}
>
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
xs={3}
>
<Avatar className={classes.avatar} src={singleGoal.avatar} />
<Typography variant="caption">
{singleGoal.first_name} {singleGoal.last_name}
</Typography>
<Typography variant="caption" className={classes.postedOn}>
Posted on{" "}
<Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
</Typography>
</Grid>
<Grid container item direction="column" xs={9}>
<Typography variant="body1">{singleGoal.text}</Typography>
<Grid item className={classes.actionButtons}>
<Button size="small" onClick={e => addLike(singleGoal._id)}>
<ThumbUpAltIcon />
</Button>
<Typography variant="caption">
{singleGoal.likes.length}
</Typography>
<Button
size="small"
onClick={e => removeLike(singleGoal._id)}
>
<ThumbDownAltIcon />
</Button>
<Button href={`/goal/${singleGoal._id}`} size="small">
<ChatIcon />
</Button>
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DoneIcon />
</Button>
)}
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DeleteIcon />
</Button>
)}
</Grid>
</Grid>
</Grid>
))}
</Grid>
</Container>
</main>
</>
);
};
Goals.propTypes = {
getGoals: PropTypes.func.isRequired,
goal: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
goal: state.goal,
auth: state.auth
});
export default connect(mapStateToProps, { getGoals, addLike, removeLike })(
Goals
);
I will need to see the rest of your code to be sure, but it seems you are dispatching your action but you are not updating your store, it could be a mistake in your reducer.
I have a simple react code. There is a material-UI Textfield.
When I click in the text box to enter data, the screen shakes. After entering data, I click outside, the box screen shakes. Do help me resolve this screen shaking. Thanks so much.
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
>
</TextField>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;
Just set onChange attributes of the Text Fields as follows and the shaking will go away.
import React, { useState } from 'react';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
const [name,setName] = useState("")
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
onChange={e => setName(e.target.value)}
/>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;