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',
}}>
Related
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 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 am using react/typescript with material UI. I want to use a background image and background color both together like color transparent. Here is my code snippet:
return (
//Todo need to do one more level of refactor
<div style={{ flex: 1, backgroundImage: `url("https://Content/images/backgrounds/91.jpg")`, backgroundSize: "cover", height: "100vh", zIndex: 2 }}>
<Grid
direction="column"
alignItems="center"
container
justifyContent="center"
sx={{height: "100vh", backgroundColor: 'rgba(0,0,235,0.3)', color:'white', zIndex: -1}}>
<Grid item>
<Paper>
But here only color is displayed, It should be display images also both together with transparent.
Please help, thanks.
You could do that using a background image and a linear gradient, this way:
return (
//Todo need to do one more level of refactor
<div style={{ flex: 1, background: `linear-gradient(rgba(0,0,235,0.3), rgba(0,0,235,0.3)), url("https://Content/images/backgrounds/91.jpg")`, backgroundSize: "cover", height: "100vh", zIndex: 2 }}>
<Grid
direction="column"
alignItems="center"
container
justifyContent="center"
<Grid item>
<Paper>
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 am struggling to align a button and a <Typography> component on the same line:
Here is what I have so far:
<Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</Grid>
My styles:
labelForgot: {
color: 'rgba(20, 176, 12,0.9)',
backgroundColor: 'transparent',
paddingLeft: 2,
'&:hover': {
color: 'rgb(57, 232, 48)',
backgroundColor: 'transparent',
}
},
root: {
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
minHeight: '100vh',
justifyContent:'center',
overflow: 'hidden',
},
gridMain: {
margin: '0 auto',
maxWidth: 300,
},
Basically I have a <div> that allows a height of ยด100%`.
For the container I use css grid main.
Here is the result
how to align horizontal icon and text in material ui
Check this page. I was stuck on the same problem... The suggested solution is wrapping the items with a div...
<div style={{
display: 'flex',
alignItems: 'center'
}}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false"
disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</div>
I tried to do it with Grids as well from Material UI but was having trouble with a header and buttons