I'm trying to implement the above table design using material UI (mui).
I'm implementing this by using tables. this is so far I've built. I tried very hard to space between them but doesn't work. please help!
And here is what I've built
Now here is my code for this
const StyledTableCell = styled(TableCell)(({ theme }) => ({
padding: 0,
border: `1px solid ${theme.palette.divider}`,
background: '#2C8EFF',
height: '100px',
}));
{columns.map((col, index) => {
return (
<StyledTableCell key={index}>
<Grid
container
sx={{
textAlign: 'center',
justifyContent: 'space-between',
width: '70px',
border: 1,
height: '100%',
}}
>
<Grid item sm={12} sx={{ bgcolor: '#FDC841' }}>
{col.upperValue}
</Grid>
<Grid
item
sm={12}
sx={{
writingMode: 'vertical-lr',
p: 2,
// height: '100%',
textAlign: 'center',
color: 'white',
}}
>
{col.label}
</Grid>
<Grid item sm={12} sx={{ bgcolor: '#FB9D67' }}>
{col.lowerValue}%
</Grid>
</Grid>
</StyledTableCell>
);
})}
Related
How do I maintain the vertical scroll functionality, while at the same time, hiding the scrollbar in Material UI's Treeview API? I have tried a few combinations of styling directly in the tree view and tree item components to hide the scrollbar, but neither worked for me.
<TreeView
aria-label="icon expansion"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 240, flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
>
<StyledTreeItem
label={
<Grid container>
<Grid item xs={3}>
Watchlist
</Grid>
<Grid item xs={8}>
</Grid>
</Grid>
}
nodeId="1"
style={{ padding: '0.2vw' }}>
<Grid container style={{ width: '100%' }}>
<LiveStockTable
minHeight={500}
maxHeight={1000}
subscribedTickers={props.subscribedTickers} />
</Grid>
</StyledTreeItem>
</TreeView>
and the StyledTreeItem:
const StyledTreeItem = styled(TreeItem)<StyledTreeItemProps>({
position: "relative",
"&:before": {
pointerEvents: "none",
content: '""',
position: "absolute",
overflow: 'hidden'
},
[`& .${treeItemClasses.group}`]: {
marginLeft: 0,
paddingLeft: 0,
}
})
I want to add circular progress bar surrounding a circular icon with a space between circular progress bar and icon just like shown in the image below.
I was able to position the circular progress bar around the icon but couldn't able to give space between them.
How can i do that.
How i want
How i am getting
Here is my code :
import * as React from 'react';
import { Grid, Paper, Box, CircularProgress, circularProgressClasses } from '#mui/material';
const MileStones = () => {
return (
<Box sx={{ flexGrow: 1, position: 'relative', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', pl: 2 }}>
<Grid container spacing={1.4} sx={{ py: 4 }}>
<Grid item xs >
<CircularProgress size={50} sx={{ color: '#C4C4C4', position: 'absolute' }} variant="determinate" value={100} />
<Paper sx={{ background: '#162983', width: 50, height: 50, borderRadius: '50%'}}></Paper>
</Grid>
<Grid item xs>
<CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
<Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
</Grid>
<Grid item xs>
<CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
<Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
</Grid>
<Grid item xs>
<CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
<Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
</Grid>
<Grid item xs>
<CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
<Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
</Grid>
</Grid>
.
.
.
.
</Grid>
</Box>
)
}
export default MileStones
You can Consider that space being a thin circle with a white background, instead.
I'm trying to make an input with an icon on the left. something like this:
I've already created the input. my plan is to add the input and icon in a grid. remove input's border and add it to the grid container.
I'm not able to remove the border. I've tried using the spread operator but I was getting errors.
there are other inputs using the same styles and they need the border.
How can I remove border for this input ?
const useStylesCustom = makeStyles((theme) => ({
root: {
border: '1px solid #e2e2e1',
overflow: 'hidden',
borderRadius: 2,
backgroundColor: '#fff',
transition: theme.transitions.create(['border-color', 'box-shadow']),
'&:hover': {
backgroundColor: '#fff',
},
'&$focused': {
backgroundColor: '#fff',
borderColor: '#DFDFDF',
},
'&$error': {
borderColor: theme.palette.error.main,
},
},
focused: {},
error: {},
}));
<Grid container>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
variant='filled'
value={lastName}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
onChange={(e) => setLastName(e.target.value)}
/>
</Grid>
</Grid>
You can remove the variant and no border will be displayed:
<Grid container style={{border: "1px solid black"}}>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
value={"lastName"}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
/>
</Grid>
</Grid>
Here is a sandbox.
In a React project I've details of wallet scrolling in a div named 'History'. Issue is that history details is scrolling without any issue, but, I want to hide inside 'History' div. How could it be done? Any appropriate solution?
Below is the code reference
const navScrollStyle = makeStyles((theme) => ({
root: {
marginTop: "120px",
display: "table",
overflowY: "auto",
maxWidth: "auto",
display: "flex",
justifyContent: "center"
}
}));
const navBodyStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
top: "0px",
position: "absolute",
width: "100%",
height: "100vh",
textAlign: "center",
background: "white",
zIndex: "9",
height: "100%",
overflowY: "auto"
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const gridClassStyle = makeStyles((theme) => ({
root: {
zIndex: "100",
flexGrow: 1,
position: "fixed",
top: "0px",
background: "white",
flexWrap: "nowrap",
boxShadow: "5px 10px 18px #888888"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const useStyles5 = makeStyles((theme) => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
textAlign: "center",
width: "100%"
}
}));
const useStyles = makeStyles((theme) => ({
root: {
top: "20px",
width: "100%",
maxWidth: "auto"
},
nested: {
paddingLeft: theme.spacing(4)
}
}));
const TestPageScroll = () => {
const navBody = navBodyStyle();
const navScroll = navScrollStyle();
const gridClass = gridClassStyle();
const classes5 = useStyles5();
const classes = useStyles();
const NavPart = () => (
<Grid className={gridClass.root} container spacing={3}>
<Grid item xs={4} style={{ textAlign: "left" }}>
<IconButton
edge="start"
className={gridClass.menuButton}
color="inherit"
aria-label="menu"
>
<Link to="/">
<ArrowBackIcon />
</Link>
</IconButton>
</Grid>
<Grid
item
xs={4}
style={{ textAlign: "center", justifyContent: "center" }}
>
<Typography variant="h6" className={gridClass.title}>
<h2>Test Scroll</h2>
</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: "right", marginTop: "2%" }}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<AccountCircle style={{ fontSize: "30px" }} />
</IconButton>
</Grid>
</Grid>
);
return (
<div className={navBody.root}>
{NavPart()}
<div className={navScroll.root}>
</div>
{/* Here the main code begins */}
<div style={{ height: "100px" }}>
<div
style={{
position: "fixed",
zIndex: "100",
background: "white",
width: "100%"
}}
>
<h2>History</h2>
</div>
<hr />
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.root}
>
<>
{/* Here purposely List are added to test overflow */}
<div style={{ overflowY: "auto", background: "red" }}>
<ListItem>
<h6>Wallet History1</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
</div>
</>
</List>
</div>
</div>
);
};
As you can see below in the picture, Wallet history details is seen clearly which I want to hide inside 'History' div
Here is the codesandbox link for your reference: https://codesandbox.io/s/react-material-forked-71op5
Please click on 'WALLET' button when page loads
The problem is your History div is fixed and your Wallet History List div has no bounds on height which is getting scrolled behind the fixed divs above. one way to solve this problem is to limit your height of your Wallet History List div and make it fixed as well.
eg. add these style to your div for list
maxHeight : "800px", position :"fixed", width:"100%"
In a React project, I've create a Recharge Wallet page, which has Recharge button to recharge coins. A new page is created by overriding on another page. All the elements are created in Material UI. For some reason, all elements are overflowing through the components. Its probably CSS issue. What could be the best solution to prevent overflowing.
Following is the code reference
const navScrollStyle = makeStyles((theme) => ({
root: {
marginTop: '70px',
display: 'table',
overflowY: 'hidden',
maxWidth: 'auto',
display: 'flex',
justifyContent: 'center',
}
}));
const navBodyStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
top: "0px",
position: "absolute",
width: "100%",
height: '100vh',
textAlign: 'center',
background: 'white',
zIndex: '9',
height: '100%',
overflowY: 'auto'
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const gridClassStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
position: 'fixed',
top: '0px',
background: 'white',
flexWrap: "nowrap",
boxShadow: '5px 10px 18px #888888',
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const useStyles5 = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
textAlign: 'center',
width: '100%'
},
}));
const NewPage = () => {
const navBody = navBodyStyle()
const navScroll = navScrollStyle()
const gridClass = gridClassStyle()
const classes5 = useStyles5()
const NavPart = () => (
<Grid className={gridClass.root} container spacing={3}>
<Grid item xs={4} style={{ textAlign: 'left' }}>
<IconButton
edge="start"
className={gridClass.menuButton}
color="inherit"
aria-label="menu"
>
<Link to="/">
<ArrowBackIcon />
</Link>
</IconButton>
</Grid>
<Grid item xs={4} style={{ textAlign: 'center', justifyContent: 'center' }}>
<Typography variant="h6" className={gridClass.title}>
<h2>Wallet</h2>
</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: 'right', marginTop: '2%' }}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<AccountCircle style={{ fontSize: "30px" }} />
</IconButton>
</Grid>
</Grid>
)
return (
<div className={navBody.root}>
{NavPart()}
<div className={navScroll.root}>
<div className={classes5.root}>
<Button variant="contained" color="secondary">
<Link to="/purchaseCoins">
Recharge Wallet
</Link>
</Button>
<br />
<Button variant="contained" color="secondary">
<Link to="/purchaseCoins">
Recharge Wallet
</Link>
</Button>
<br />
</div>
</div>
</div>
)
}
I have purposefully added recharge wallet button to test the overflowing.
Here is the codesandbox link for much clarity: https://codesandbox.io/s/react-material-forked-71op5.
Please click on 'WALLET' button when page loads
I changed the marginTop of navScrollStyle, overflowY to auto, and assigned a zIndex to the gridClassStyle. I think it's what you were looking for. Please check the online version here on sandbox
You gave 70px to the Wallet component, and I think you can give the height value of calc (100% - 70px). You must adjust the height as much as the margin-top px.