Divides later into text - javascript

I use materiel ui
Interested in putting a text followed by a divider
like this
I tried to do that
<Grid>
<Typography variant="h6" color="primary">
{'text'}
</Typography>
<Divider variant="inset"></Divider>
</Grid>
But this is the result I got


You can use Box component.
// using display grid
<Box
display="grid"
alignItems="center"
gridColumnGap={16}
gridTemplateColumns={"1fr auto"}
>
<Divider />
<Typography variant="h6" color="primary">
hello world
</Typography>
</Box>
// using flex box
<Box display="flex" alignItems="center">
<Divider style={{ flexGrow: 1, marginRight: 16 }} />
<Typography variant="h6" color="primary">
hello world
</Typography>
</Box>

Related

How can I make the Material UI Chip component not to be displayed when there is no content inside?

I am creating an app that will display some content from an Api.
I have created a Material UI Card component to present the information I get and within that card, I have a mui Chip component.
<Card sx={{ width: "368px" }}>
<CardActionArea>
<CardMedia component="img" height="200" image={image} />
<CardContent>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Typography variant="subtitle2" color="#1976d2">
{center}
<FiberManualRecordIcon sx={{ fontSize: 4 }} />
</Typography>
<Typography variant="subtitle2" color="#1976d2">
{date}
</Typography>
</Box>
<Typography variant="h5" component="div">
{title}
</Typography>
<Typography
sx={{
display: "-webkit-box",
overflow: "hidden",
textOverflow: "ellipsis",
}}
variant="body2"
>
{description}
</Typography>
<Box />
<Box>
<Chip label={keywords} />
</Box>
</CardContent>
</CardActionArea>
</Card>
The labels of the Chip component are some keywords,which I get them from an Api response. But sometimes there are no keywords. In that case, I want the mui Chip component not to be displayed at all, instead of getting one with empty content. Is there a way to make it happen?

Please try this.
<Card sx={{ width: "368px" }}>
<CardActionArea>
<CardMedia component="img" height="200" image={image} />
<CardContent>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Typography variant="subtitle2" color="#1976d2">
{center}
<FiberManualRecordIcon sx={{ fontSize: 4 }} />
</Typography>
<Typography variant="subtitle2" color="#1976d2">
{date}
</Typography>
</Box>
<Typography variant="h5" component="div">
{title}
</Typography>
<Typography
sx={{
display: "-webkit-box",
overflow: "hidden",
textOverflow: "ellipsis",
}}
variant="body2"
>
{description}
</Typography>
<Box />
<Box>
{keywords && ( <Chip label={keywords} />)}
</Box>
</CardContent>
</CardActionArea>
</Card>

With the Material-UI Grid, how can I make these into 5 columns in one row?

I have these 5 columns where I wanted them to be in one row. However, so far, this is what I got:
How do I make all of the columns be in one row?
I have also recreated this in my codesandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j
Below are the codes:
codes:
<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx={{ "& h1": { m: 0 } }}>
<Grid container spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 1
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 2
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 3
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 4
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 5
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Container>

You can use wrap="nowrap" so that the item will stay in the same row.
<Grid container wrap="nowrap" sx={{ flexDirection: { xs: "column", md: "row" }}} spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
.
.
.
</Card>
</Grid>
</Grid>

How to centre Material-UI Grid Components

This post has been resolved
Hi, I'm using Material-UI in my React App, and I want to centre a Grid item that contains a Card and two more Grid items.
Here is the relevant code. The Cards do appear in the middle of the screen, but they aren't centred and it's really, really annoying me.
Screenshot:
Necessary code:
render() {
return (
<Grid container>
<Grid item xs={12}>
<Typography variant="h3" gutterBottom>
My Projects
</Typography>
</Grid>
<Grid item xs={6} justify="center">
<Grid item xs={12}>
<Card>
<CardMedia
component="img"
height="140"
image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/spotter.png?raw=true"
alt="Spotter"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Spotter
</Typography>
<Typography variant="body2" color="text.secondary">
Spotter is an easy-to-use Spotify music controller with
functioning room and voting systems.
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
color="primary"
to="/project/spotter"
component={Link}
>
Read More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<Grid item xs={12}>
<Card>
<CardMedia
component="img"
height="140"
image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/impulse.png?raw=true"
alt="Spotter"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Impulse
</Typography>
<Typography variant="body2" color="text.secondary">
Impulse is a macOS Virtual/Voice Assistant!{" "}
<i>Impulse is a little buggy and slow.</i>
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
color="primary"
to="/project/impulse"
component={Link}
>
Read More
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
);
}
Some system info:
Google Chrome: 93.0.4577.82 (Official Build) (x86_64)
Revision: e3a25d9b9e2d0b728e045ec87c0aa4942aa46e4e-refs/branch-heads/4577#{#1237}
OS: macOS Version 10.15.7 (Build 19H1417)
JavaScript: V8 9.3.345.19
Thanks!

As you say using material-ui
just add style to your code
material-ui v4.12.3
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(() => ({
root: {
display: "flex",
justifyContent: "center",
alignItem: "center"
}
}));
and add it to your Grid
export default function App() {
const classes = useStyles();
return (
<Grid container className={classes.root}>
....
)}
check out here

The simpliest answer it's to a div with name of .container and give it width:100% and display:flex;justify-content:center;gap:20px and that's it.
here preview : https://codesandbox.io/s/vigilant-bird-ulpvm?file=/index.html

React - Material UI Menu not working properly

I'm using the menu/menu item from material ui. It seems to have an issue if I try to render it based on a condition. Refer below...
const AddSelectItemButton = () => {
return (
<>
<Fab
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
className={classes.addButton}
size="medium"
color="primary"
aria-label="add"
>
<AddIcon />
</Fab>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleDelete}>Delete Item</MenuItem>
<MenuItem onClick={handleAddNew}>Add Item</MenuItem>
</Menu>
</>
)
}
Inside the main container I have something like this
return (
<div className='my-5'>
<Paper className="pl-5 pr-5 pb-5 position-relative">
<Typography className="pt-4 mb-4 text-center" variant="h4">My Items</Typography>
{!isAuthMode &&
<AddSelectItemButton />
}
<Grid container spacing={3} justify="center">
{allItems.items.map(item=>
<Grid key={item.id} item xs={5} className={`mt-4`} style={{height: '200px'}}>
<Card className={`${classes.root} d-flex ${classes.packInner}`}>
<CardActionArea className="d-flex">
<CardMedia
className={`${classes.media} ${classes.cardImage}`}
image={item.image}
title={item.brand}
/>
<CardContent className={classes.textContainer}>
<Typography gutterBottom variant="subtitle1">
{item.brand}
</Typography>
<Typography variant="body2" color="textSecondary">
{item.name}
</Typography>
<Typography variant="body2" color="textSecondary">
Weight: {item.weight}
</Typography>
<Typography variant="body2" color="textSecondary" className={classes.itemDescription}>
{packInfo.description.length > 80 ?
(`${packInfo.description.substring(0, 77) + '...'}`)
:
packInfo.description
}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
)}
</Grid>
</Paper>
</div>
);
If I don't do the condition and include the code in the original rendering. The menu loads at the position of the button. With the condition, it renders far top left of the page and not at the button.
Anyone have an idea or need more info?
Thanks!

{!isAuthMode && (
<AddSelectItemButton />
)}

Material UI How to set grid element to span 3 rows vertically?

This seems like a basic question, but there is no example of how to accomplish this in the official documentation of Material UI.
I have tried nesting the grid, but the grid element on the right will not span the vertical space. I have tried align-items="stretch".
A screenshot and my code are below. Thanks for any suggestions!
return (
<Container>
<Box>
<Typography>Test</Typography>
</Box>
<Grid container spacing={3} direction="row" justify="center" alignItems="stretch">
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={6} spacing={3}>
<Grid>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Customer Profile
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography className={classes.pos} color="textSecondary">
Position
</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Grid>
<Grid>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Preferences
</Typography>
<Typography variant="h5" component="h2">
Color
</Typography>
<Typography className={classes.pos} color="textSecondary">
Size
</Typography>
<Typography variant="body2" component="p">
Style
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Grid>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Lifestyle
</Typography>
<Typography variant="h5" component="h2">
Destination:
</Typography>
<Typography className={classes.pos} color="textSecondary">
Climate:
</Typography>
<Typography variant="body2" component="p">
Beverages:
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Customer Cart
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography className={classes.pos} color="textSecondary">
Position
</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
</Container>
);
}

Simply add height 100% on Card and Grid
<Grid style={{ height: "100%" }}>
<Card style={{ height: "100%" }}>
import React from "react";
import "./styles.css";
import {
Grid,
Typography,
Container,
Box,
Paper,
Card,
CardContent,
CardActions,
Button
} from "#material-ui/core";
const YourCard = () => {
const classes = {};
return (
<Card
className={classes.root}
variant="outlined"
style={{ height: "100%" }}
>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
Customer Profile
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography className={classes.pos} color="textSecondary">
Position
</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
};
export default function App() {
const classes = {};
return (
<Container>
<Box>
<Typography>Test</Typography>
</Box>
<Grid
container
spacing={3}
direction="row"
justify="center"
alignItems="stretch"
>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={6}>
<Grid container spacing={3}>
<Grid item xs={12}>
<YourCard />
</Grid>
<Grid item xs={12}>
<YourCard />
</Grid>
<Grid item xs={12}>
<YourCard />
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid style={{ height: "100%" }}>
<YourCard />
</Grid>
</Grid>
</Grid>
</Container>
);
}

Categories