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.
Related
I have an app bar and a mini side drawer variant with code near identical to that which is given as example on material-ui. I am having trouble aligning a box with some info about the logged in user to the end of the app bar. Right now I am using grid containers, but these cause breaking bugs as screen size decreases. How can I force this box to the end of the toolbar while keeping any other content in the tool bar aligned to the start?
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<Grid container>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Grid>
<Grid container justifyContent="flex-end">
<Box
style={{
display: "flex",
alignItems: "center",
backgroundColor: "#0672cb",
height: "64px",
padding: "10px 24px 10px 24px",
}}
>
<i class="icon_class" style={{ fontSize: "24px", color: "#fff", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{loggedUser}
</Typography>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{userRole}
</Typography>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{userExperience}
</Typography>
</Box>
</Box>
</Grid>
</Toolbar>
</AppBar>
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>
);
})}
How can I center the grid container while also ensuring the bottom grid items float to the left?
Bottom of Grid
<Grid container spacing={0}
alignItems="center"
justifyContent="center" >
{items.map((product, idx) => {
return <Grid item xs={3} key={idx} style={{
border: 'solid',
padding: '10px',
marginRight: '5px',
marginLeft: '5px',
marginTop: '10px',
marginBottom: '10px',
}}>
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'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.