Set Material UI card to max height - javascript

I am using Material UI Card as seen here.
I want to set these cards to a maximum height, nicely handling the text and pictures inside. How would I do this?
Here is some code:
<Card className={classes.card} >
<CardHeader
avatar={
<Avatar aria-label={authorAvatar} src={authorImg} className={classes.avatar}/>
}
action={
<Fieldset className={classes.date}>
{postDate}
</Fieldset>
}
title={post.title}
subheader={
<Link to={userUrl}>
{authorName}
</Link>
}
/>
<CardContent>
<div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(bodyHtml)}}></div>
</CardContent>
<CardActions className={classes.actions} disableActionSpacing>
<IconButton
className={classnames(classes.unliked, {
[classes.liked]: this.state.liked,
})}
aria-label="Add to favorites"
onClick={this.handleFavourite}
>
I am trying to use sizing and maxHeight, but I cannot get the syntax right.
import maxHeight from '#material-ui/system/sizing';
<CardContent maxHeight = "10">
This gives several errors.
Do I put it here?
const styles = theme => ({
card: {
marginTop: 20,
maxHeight: 300,
},

I got this working in the following way:
import { sizing } from '#material-ui/system/';
const styles = theme => ({
card: {
marginTop: 20,
sizing, maxHeight: 300,
},

Related

Skeleton-Avatar and ImageButton in MUI React are forced to oval background shapes

When using mui Stack I get weird side effect of geting all the background shapes of Skeleton Avatar and background area smeared to oval|elipsoid shapes. I tried setting equal width and height for Avatar but id does not help.
How can I fix it throguh sx mui component property or css?
code fragment
<Box
noValidate autoComplete="off"
sx={{ marginLeft: '15%','& .MuiTextField-root': { m: 2, width: '25ch' }}}>
<div>
<form onSubmit={onSubmit} >
{formFields.map((form, index) => {
return (
<Fade in={true} sx = {{width: '95%'}} {...{ timeout: 500 }}>
<Stack direction="row" borderRadius="0" spacing={2} key={index} style ={{marginLeft: '-50px', }}>
{form.img? <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} /> : <Skeleton animation={false} variant ='circular'> <Avatar sx={{ width: 56, height: 56}} /> </Skeleton>}
<TextField {/* ... */}/>
<IconButton onClick={() => removeFields(index)}><DeleteIcon /</IconButton>
</Stack>
</Fade>
)
})}
</form>
<IconButton onClick={addFields} color={'warning'}> <AddCircleOutlineOutlinedIcon /></IconButton>
<br></br><br></br>
<Button onClick={onSubmit} color={'warning'} variant="contained" endIcon= {<SendIcon/>} > Search links </Button>
Normally, the default value of align-items for flex items will be stretch, that's why you see your icon is stretched in the cross axis
The solution is simple, set alignItems prop in Stack to a different value rather than normal/stretch. Here I use center
<Stack
direction="row"
borderRadius="0"
spacing={2}
alignItems="center" // this line
style={{ marginLeft: "-50px" }}
>
Demo
References
CSS align-items

How to reload a webpage once routed to using react-router-dom

Re-asking from a previous questions as this could be a work around.
I have a widget I'm using from a software provider (Mindbody) it needs to load some data using a <script> tag which I have in the head of my app. The page is being routed to using react-router-dom. The problem the js data only loads when you refresh the page.
What is a good method to reloading a page as soon as the page is routed to. I tried window.location.refresh(); but this loads infinite time.
import * as React from 'react';
import { Stack, Box, Typography, Modal, Backdrop } from '#mui/material';
import ButtonV2 from './ButtonV2';
import PurchaseWidget from './PurchaseWidget';
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
borderRadius: 3,
transition: "5s ease-in-out"
};
const PurchaseLanding = () => {
const [show, setShow] = React.useState(true);
const handleClose = () => setShow(false);
return (
<div>
<Modal
open={show}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
disableAutoFocus="true"
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}>
<Box sx={style}>
<div>
{/* full width image */}
<img style={{borderRadius: "10px 10px 0 0"}} src="https://res.cloudinary.com/djjb1vyjm/image/upload/v1660541084/1_uxhi8p.png" width="100%" alt="" />
</div>
<Box p={2}>
{/* title */}
<Typography align="center" id="modal-modal-title" variant="h5" component="h2">
<span className='space-font-heavy'>Buy your [10-pack]</span>
</Typography>
{/* onboarding message */}
<Stack pb={3} alignItems="center" justifyContent="center" direction="row" spacing={2}>
<Typography px={1} align="center" id="modal-modal-description" sx={{ mt: 2 }}>
<span className='space-font-light'>Once completed download the Mindbody app to add, update, and book your workouts!</span>
</Typography>
</Stack>
{/* button group left/right */}
<Stack direction="row" justifyContent="center" alignItems="center">
<ButtonV2 />
</Stack>
</Box>
</Box>
</Modal>
</div>
);
}
export default PurchaseLanding

Material Ui card change according to input

I have used material ui card and when i display it. It shows like below image. I want to show my card like that when cards do not fit the page it goes below and all card size must be same. How can i do that?
Here is my code:
const useStyles = makeStyles({ // Styling for my cards
root: {
width: 255,// i changed that line and below line but nothing happened
},
media: {
height: 190,
},
});
export default function AlbumsCard() {
const classes = useStyles();
..... //Some http requests
return (
<div>
<div>
<input
style={{
width: 500,
"margin-left": "auto",
"margin-right": "auto",
"margin-top": "10px",
}}
type="text"
placeholder="Search Album"
onChange={handleChange}
value={input}
/>
</div>
<div style={{ display: "flex" }}> //cardss
{k.map((album) => (
<Link
to={`/albums/${album.album_id}`}
style={{ textDecoration: "none", color: "#15cdfc" }}
>
<Card style={{ margin: "10px" }} className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={album.album_pfp}
title={album.album_name}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{album.album_name}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{album.album_song_count}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Link>
))}
</div>
</div>
);
}
Also the image from my app:
You can see that above. All cards placed in a line and some cards height's are different. Also there is a scroll bar.
I want to display whole card i a same size and when it overflows the page. It goes below.
Updated version:
Now each card has a different size how can i solve that? I think it is from image size.

Hide/disable arrow buttons of horizontal scroller in react.js

Hy, I'm trying to disable/hide the arrow buttons of a horizontal scroller on start and end of the scroll.
I tried to use useEffect lifecycle by by setting its dependency document.getElementById('hscroll').scrollLeft, so that i can fire a function on scrollLeft change... but on load it shows an error "Cannot read property 'scrollLeft' of null" which is obviously right.
code is here ... hscroll CodeSandBox
how can I be able to do that?
need your help!
Thank you in advance <3.
You can do that only with useState hook and conditional rendering.
Here's a fully-working solution assuming we know width of the div that wraps your slides:
const HorizontalScroll = () => {
const [slideLeft, setSlideLeft] = useState(0);
const sliderWidth = 1900;
//on arrow click
const moveRight = () => {
const el = document.getElementById(`hscroll`);
setSlideLeft(el.scrollLeft += 200);
};
const moveLeft = () => {
const el = document.getElementById(`hscroll`);
setSlideLeft(el.scrollLeft -= 200);
};
return (
<div className="homepageMargin">
<section style={{ display: "flex", justifyContent: "space-between" }}>
{slideLeft > 0 ? <IconButton onClick={moveLeft}>
<ArrowBackIcon
style={{
paddingTop: ".2rem",
cursor: "pointer"
}}
/>
</IconButton> : <div />}
{slideLeft < sliderWidth ? <IconButton onClick={moveRight}>
<ArrowForwardIcon
style={{
paddingTop: ".2rem",
cursor: "pointer"
}}
/>
</IconButton> : <div />}
</section>
<hr style={{ backgroundColor: "black" }} />
<div class="flex-container" id={`hscroll`}>
{data.map((item) => (
<div style={{ minWidth: "300px" }}>
<img src={item.imgSrc} alt="images" style={{ width: "18rem" }} />
<h6>{item.title}</h6>
</div>
))}
</div>
</div>
);
};
Above example works becouse React component re-render every time you update the state. Also, you can get width of your slider like that:
const sliderWidth = yourRefName.current.style.width;
But it has to be declared explicitly in your CSS.

How to make checkbox "Badge" in MaterialUI?

According to the API of Badge https://material-ui.com/api/badge/ there is a prop component which takes either a string to use a DOM element or a component.
In My code
<Badge color="primary" classes={{ badge: classes.badge }} component="checkbox">
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
OR
import Checkbox from '#material-ui/core/Checkbox';
<Badge color="primary" classes={{ badge: classes.badge }} component={Checkbox}>
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
In both the cases I am no getting checkbox as badge. How to do this?
Use Checkbox component. You can use component for icon props when it is not checked and checkedIcon props when it is checked.
<Checkbox
icon={<Avatar className={classes.purpleAvatar}> AP</Avatar>}
checkedIcon={<Avatar className={classes.orangeAvatar}> AP</Avatar>}
/>
I was stuck on the same problem and worked out as below.
Use badgeContent property.
badgeContent property accepts node and shows it as a badge content.
import CheckIcon from '#material-ui/icons/Check'
<Badge
color="secondary"
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
badgeContent={<CheckIcon style={{ fontSize: 10, padding: 0, color: 'white' }} />}
classes={{ badge: classes.badge }}
>
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
After that you can customize that badge content style like this.
import { Badge } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
In my case I used following style to change badge size.
badge: {
fontSize: 16,
padding: 0,
minWidth: '12px !important',
height: '12px !important',
},
More discussion about customization will be found How to change font size of material ui badge content in reactjs?.

Categories