Please help, its driving me crazy, feels like this should be so simple.
I can't seem to center an image/avatar in the middle of a Card component I'm trying to create.
Tried alignText ,alignItems, alignContent, justify.
I even tried which worked but is obviously now obsolete...
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardContent from '#material-ui/core/CardContent';
import Typography from '#material-ui/core/Typography';
import Avatar from '#material-ui/core/Avatar';
import Dankirk from '../assets/img/dankirk.jpg'
const useStyles = makeStyles({
card: {
width: "100%",
minHeight: "150px",
borderRadius: "0px",
},
title: {
fontSize: 14,
textAlign: "center"
},
pos: {
marginBottom: 12,
},
avatar: {
margin: 10,
width: 120,
height: 120,
},
});
export default function SimpleCard() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.container}>
<Card className={classes.card}>
<CardContent style={{justifyContent: 'center'}}>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Test
</Typography>
<Avatar alt="avatarimage" src={name} className={classes.avatar} />
</CardContent>
</Card>
</div>
</div>
);
}
Image just stays to the left...
Can you try display flex:
style={{ justifyContent: "center", display: "flex" }}
Also try do add lineHeight: 0, letterSpacing: 0 to Avatar component
You just have to use margin: "auto" like this:
<Avatar alt="Travis Howard" src="/students/gaby.svg" sx={{ height: "64px", width: "64px", margin: "auto" }} />
Related
I have here list of cards that I want to be in Arabic language but it has a problem with continue the word, it takes like half the word letters on line then break the half on the next line, for example in arabic "بطر
يق"
A picture for example:
can you help me please
Please note that the code written in React.js
the code
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 { fontSize, textAlign } from '#material-ui/system';
import "../fonts/29LTAzer-Medium.ttf"
import "../Styles/card.css"
const useStyles = makeStyles({
overrides: {
MuiCardActions: {
root: {
display: 'flex',
alignItems:"center",
padding: 8,
flexDirection: "row-reverse",
},
}
},
card: {
width: 700,
height:250,
backgroundColor: "#009CA7",
color:"white",
borderRadius: 25,
margin: 15,
textAlign: 'right',
fontFamily:"LTAzer-Regular",
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
fontFamily: "LTAzer-Regular",
},
title: {
fontSize: 14,
color:"white",
fontFamily: "LTAzer-Medium",
},
pos: {
marginBottom: 12,
color:"white",
fontFamily: "LTAzer-Regular",
},
button:{
color:"white",
width:50,
marginLeft: 300,
fontSize: 15,
border: 3,
border: "solid #9DCB82",
textAlign: "center",
backgroundColor: "#9DCB82",
// paddingRight: 50,
flexDirection:"row-reverse",
fontFamily: "LTAzer-Regular"
},
desc:{
textAlign:"right",
direction:"rtl",
fontFamily:"LTAzer-Regular",
wordBreak:"break-all",
// overflowWrap:"break-word",
whiteSpace:" ",
wordWrap:"normal",
textOverflow:"ellipsis",
overflow:"hidden",
display:"-webkit-box",
// lineHeight:16,
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
},
name:{
fontFamily: "LTAzer-Medium",
}
});
export default function SimpleCard(props) {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
{props.cardType}
</Typography>
<Typography className={classes.name} variant="h5" component="h2">
{props.cardName}
</Typography>
<Typography className={classes.pos} color="textSecondary">
{props.cardDate}
</Typography>
<Typography className={classes.desc} variant="body2" component="p">
{props.cardDesc}
</Typography>
</CardContent>
<CardActions>
<Button className={classes.button} size="small">تفاصيل</Button>
</CardActions>
</Card>
);
}
I solved the problem by removing the wordBreak:"break-all"
I've just created a one page website portfolio and it is pretty much complete, but having issues with setting the background position of the home screen to center right. Here is my site:
https://berkley-portfolio.netlify.app/
My repo: https://github.com/Bolmstead/Portfolio
I just want the image of me to appear when resizing the window to mobile. I believe background-position would fix this right? The background size is cover, and I believe I am doing it correctly, but seem to be missing something. Below is my home component:
import React, { useEffect } from "react";
import Grid from "#material-ui/core/Grid";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
const useStyles = makeStyles((theme) => ({
homeContainer: {
backgroundImage: `url(/images/home2.jpg)`,
height: "103vh",
backgroundSize: "cover",
backgoundPosition: "center right"
},
overlay: {
zIndex: 1,
height: "100%",
width: "100%",
backgroundSize: "cover",
background: "rgba(0, 0, 0, 0.5)",
},
firstName: {
fontWeight: "bold",
color: "white"
},
lastName: {
fontWeight: "bold",
color: "#FFC220"
},
caption: {
fontWeight: "bold",
color: "white"
},
}));
export default function Home() {
const classes = useStyles();
const [fadedIn, setFadedIn] = React.useState(false);
useEffect(() => {
async function fadeInHomeScreen() {
setFadedIn((prev) => !prev);
}
fadeInHomeScreen();
}, []);
return (
<Grid item xs={12} className={classes.homeContainer}>
<a id="Home">
<Grid
container
alignItems="center"
justify="center"
direction="row"
className={classes.overlay}
>
<Grid item xs={12} align="center" justify="center">
<Container maxWidth="md" align="center" justify="center" className={classes.container}>
<Typography
m={12}
variant="h2"
component="h2"
className={classes.firstName}
display="inline"
>
Berkley{" "}
</Typography>
<Typography
m={12}
variant="h2"
component="h2"
className={classes.lastName}
display="inline"
>
Olmstead
</Typography>
<Typography
m={12}
variant="h6"
component="h6"
className={classes.caption}
>
I'm a Full-Stack Developer
</Typography>
</Container>
</Grid>
</Grid>
</a>
</Grid>
);
}
You have a typo, backgoundPosition should be backgroundPosition
homeContainer: {
backgroundImage: `url(/images/home2.jpg)`,
height: "103vh",
backgroundSize: "cover",
backgroundPosition: "center right"
},
I'm new at react. I'm using media cards to present some picture and small text and have been trying to give small sliding animation to my text and background layer. However I failed. Codes are below:
import React, { useState, Component } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Typography from '#material-ui/core/Typography';
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
export default function SectionCard(props) {
const [areaHeight, setAreaHeight] = useState(100);
const [imgSize, setImgSize] = useState(1);
const [lineColor, setLineColor] = useState('dodgerblue');
const [textPosition, setTextPosition] = useState(0);
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 400,
scale: imgSize,
},
greyCover: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
height: areaHeight,
width: '100%',
bottom: 0,
position: 'absolute',
},
line: {
backgroundColor: lineColor,
height: 5,
width: '100%',
borderRadius: 0,
},
textPosition: {
paddingTop: textPosition,
fontFamily: 'Quicksand !important',
color: 'white !important',
},
body: {
fontFamily: 'Quicksand !important',
},
}));
const classes = useStyles();
return (
<Grid item xs={12} sm={4} onMouseEnter={() => (setAreaHeight('100%'), setLineColor('red'), setImgSize(1.2), setTextPosition('150px!important'))} onMouseLeave={() => (setAreaHeight(100), setLineColor('dodgerblue'), setImgSize(1), setTextPosition('0px !important'))}>
<CardActionArea>
<CardMedia
className={classes.media}
image={props.img}
/>
<CardContent className={classes.greyCover} style={{ fontFamily: 'Quicksand', }}>
<div className={classes.textPosition}>
<Typography gutterBottom variant="h5" component="h2" align="center">
{props.title}
</Typography>
<Typography component="p" align="center">
{props.text}
</Typography>
</div>
</CardContent>
</CardActionArea>
<Paper className={classes.line} />
</Grid>
);
}
Codes are probably messy. Sorry for that. onMouseEnter and onMouseLeave are working fine. I just want to see that greyCover class and text moves slowly to height 100% and text to mid of the frame.
I didn't want to use another packages yet I don't know how to use too to be honest.
What I'm doing wrong?
How can I move my components on the image by using material UI ? I want to move my heart component to the top right corner of my image and ratings on the bottom of my image.
import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import FavoriteBorderIcon from "#material-ui/icons/FavoriteBorder";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import Grid from "#material-ui/core/Grid";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";
const useStyles = makeStyles({
root: {
maxWidth: 345,
display: "flex",
},
text: {
textAlign: "center",
color: "#333333",
},
textCardBottom: {
display: "flex",
justifyContent: "center",
},
textPrice: { color: "#333333" },
textStrike: { margin: "0px 10px 0px 10px" },
textDiscount: { color: "#ff6a6a" },
stars: {
right: 9,
},
ratings: {},
});
const Cards = () => {
const [showComponent, setShowComponent] = useState(false);
const classes = useStyles();
const handleToggleHoverIn = (event) => {
event.preventDefault();
setShowComponent(true);
};
const handleToggleHoverOut = (event) => {
event.preventDefault();
setShowComponent(false);
};
console.log("The state showComponent value is ", showComponent);
return (
<Card
onMouseEnter={handleToggleHoverIn}
onMouseLeave={handleToggleHoverOut}
className={classes.root}
>
<CardActionArea>
<CardMedia
component="img"
alt=""
image={image}
title="Contemplative Reptile"
/>
{/* {showComponent ? ( */}
<Grid container>
<Stars right="40%" /> // want this rating component on the centre of my image
<FavoriteBorderIcon fontSize="large" /> // want this heart to the top right corner
</Grid>
{/* ) : null} */}
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
className={classes.text}
>
Printed round Neck
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="div"
className={classes.textCardBottom}
>
<Typography
variant="body2"
color="textSecondary"
component="b"
className={classes.textPrice}
>
Rs. 454
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="strike"
className={classes.textStrike}
>
Rs. 699
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="span"
className={classes.textDiscount}
>
(35 % off)
</Typography>
{/* <p>
<b>Rs. 454</b>
<strike>Rs. 699</strike>
<span style={{ color: "#FF7F7F" }}> (35 % off) </span>
</p> */}
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default Cards;
I tried to use the position property of material UI but I wasn't able to move the components. I tried the Material UI docs but couldn't find properties that could help me moving the components.
did you tried to add inline styles like this:
<FavoriteBorderIcon fontSize="large" style={{ position: "absolute", top: "5px", right: "5px" }}/>
<Stars right="40%" style={{ position: "absolute", bottom: "5px" }}/>
and perhaps you need also add some position to Grid as well
<Grid style={{ position: "relative" }}>
I'm trying to make this component with MaterialUI:
original box
How can I make this? I'm trying with the card component, but seems like:
sh*tty box
This is my makeStyles:
const useStyles = makeStyles(() => ({
cardHeader: {
color: "white",
borderRadius: "0"
},
cardDescription: {
display: "flex",
justifyContent: "center",
alignItems: "baseline",
backgroundColor: "#315059",
color: "cyan"
},
}));
const classes = useStyles();
And this is my card component:
<Card style={{borderRadius: "0"}}>
<CardHeader
title="VELOCIDAD MEDIA"
titleTypographyProps={{ align: "center" }}
subheaderTypographyProps={{ align: "center" }}
className={classes.cardHeader}
style={{backgroundColor:"#f92f3b"}}
/>
<CardContent style={{backgroundColor:"#f92f3b"}}>
<div className={classes.cardDescription}>
<Typography component="h2" variant="h3" color="cyan" >
262
</Typography>
<Typography variant="h6" color="white">
KM/H
</Typography>
</div>
</CardContent>
</Card>
your given code for sh*tty box and screenshot is not matching. Maybe other styles of the project are interfering with it. However, I made some changes to look similar to the required screenshot.
Note:- Fonts and card dimensions depend on the use case.
import { Card, CardContent, CardHeader, makeStyles, Typography } from "#material-ui/core";
import React from "react";
import "./styles.css";
export default function App() {
const classes = useStyles();
return (
<div>
<Card style={{borderRadius: "0",width:'380px'}}>
<CardHeader
title="VELOCIDAD MEDIA"
titleTypographyProps={{ align: "center" }}
subheaderTypographyProps={{ align: "center" }}
className={classes.cardHeader}
style={{backgroundColor:"#f92f3b"}}
/>
<CardContent style={{backgroundColor:"#f92f3b",padding:'8px'}}>
<div className={classes.cardDescription}>
<Typography component="h2" variant="h3" color="cyan" >
262
</Typography>
<Typography variant="h6" style={{marginLeft:'15px', color:'#fff'}} color="white">
KM/H
</Typography>
</div>
</CardContent>
</Card>
</div>
);
}
const useStyles = makeStyles(() => ({
cardHeader: {
color: "white",
borderRadius: "0",
},
cardDescription: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#315059",
color: "cyan",
height:'150px'
},
}));