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,
}
})
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>
);
})}
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 use material-ui's Grid component in my React 16.13.0 application. I want to have a row with three items. The first two items should only take up as much space as they need to (I don't want to hard code pixel values if possible). I would like the third item to take up the remaining horizontal space and float the furthest to the rigth (I discovered React doesn't like "float: right" as a style, though). I have this
const styles = (theme) => ({
root: {
textAlign: "left",
margin: theme.spacing(2),
paddingBottom: theme.spacing(1),
color: theme.color.secondary,
},
cardHeader: {
paddingBottom: theme.spacing(0),
},
cardContent: {
width: "100%",
paddingBottom: theme.spacing(1),
},
rowBody: {
width: "100%",
flexWrap: "nowrap",
alignItems: "center",
},
});
...
<CardContent className={classes.cardContent}>
<Grid container className={classes.rowBody}>
<Grid item>
<img height="20" src={require('../../img/apple.svg')} alt="" />
</Grid>
<Grid item>
{title}
</Grid>
<Grid item>
<InfoIcon />
</Grid>
</Grid>
But unfortunately, this renders everything bunched up together
How can I adjust the styles to do what I want?
Edit: This is what is displayed based on the answer given by #Mohsen007 ...
Follow the code below:
rowBody: {
width: "100%",
flexWrap: "nowrap",
alignItems: "center",
display: "flex",
},
<Grid container className={classes.rowBody}>
<Grid item>
<img height="20" src={require('../../img/apple.svg')} alt="" />
</Grid>
<Grid item style={{flex: 1,}}>
{title}
</Grid>
<Grid item>
<InfoIcon />
</Grid>
</Grid>
I am using MUI with React and I have a <Paper> element which wraps a <Grid> with 3 children elements. When setting the overflowY property of the bottom grid item to "auto", when the content becomes too big, the scroll bar doesn't show up but it breaks the parent container. This is my code:
<Paper
elevation={0}
style={{
height: "776px",
width: 342,
overflowY: "hidden"
}}
>
<Grid
container={true}
direction="column"
style={{ overflowY: "hidden" }}
>
{
<Grid
container={true}
item={true}
style={{
flexGrow: 1,
padding: "16px",
width: "100%",
flexWrap: "nowrap",
position: "sticky",
top: 0
}}
>
{props.pageTitle && (
<Grid item={true} style={{ marginTop: 6 }}>
{!filterOpen && (
<Typography variant="h6">
<span
style={{
paddingLeft: 8
}}
>
{props.pageTitle}
</span>
</Typography>
)}
</Grid>
)}
{props.allowFilter && (
<Grid justify={"flex-end"} container={true} item={true}>
<FmsFilterBox
filterText={filterText}
onChange={setFilterText}
cssFilterBoxWidth="100%"
onFilterOpenChanged={setFilterOpen}
/>
</Grid>
)}
</Grid>
}
<Grid item={true} style={{ flexGrow: 1 }}>
<Divider style={{ width: "100%" }} />
</Grid>
<Grid
item={true}
style={{
flexGrow: 1,
overflowY: "auto"
}}
>
{props.children(filteredData)}
</Grid>
</Grid>
</Paper>
I tried everything but I can't get the scroll bar appear for the 3rd (bottom) grid item (the one rendering {props.children(filteredData)} which is a list with list items fetched from the back end).
If I remove the overflowY: "hidden" from the <Paper>, the content of the 3rd gets hidden, but still no scroll bar - please see the photos attached.
I am really out of ideas, did anyone have this issue before? Thank you.
Fixed it. Apparently I had to add a height of 100% to the upper most grid (main container) and a flex-wrap of "no-wrap".
I am trying to add Unassigned Text to the bottom of my Container, as shown in this mockup:
Below is the code, that I have so far. I am struggling to get the border between the play button working too. I have tried the usual css: bottom:0 and position:relevant Along with Flexbox but it doesn't seem to want to go to the very bottom of the container.
const styles = theme => ({
root: {
flexGrow: 1,
overflow: 'hidden',
padding: theme.spacing(0, 3),
},
paper: {
maxWidth: 800,
margin: `${theme.spacing(2)}px auto`,
padding: theme.spacing(2),
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
playButton: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
position: "relative",
"& .playButton": {
position: "absolute",
top: "60%",
left: "-55px",
transform: "translateY(-50%)",
},
"& .star-rating": {
"& .fa-star": {
"&:hover": {
"&::before": {
content: "\f005",
color: "yellow"
}
}
}
},
},
});
function Tasks(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Grid container spacing={2}>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs>
<div className="name-label">
Name
</div>
<Typography variant="h6" gutterBottom>
{props.name}
</Typography>
<div className="form-divider"></div>
<Typography variant="body2" color="textSecondary">
{props.description}
</Typography>
</Grid>
</Grid>
<Grid item classes={{ root: props.classes.playButton}}>
<Grid item xs={3} className="playButton">
<i class="far fa-play-circle fa-2x"></i>
</Grid>
<div className="workers-assigned-label">
Workers Assigned
</div>
<Typography variant="h6" gutterBottom>
0/25
</Typography>
<div class="star-rating">
<label class="far fa-star fa-2x"></label>
<label class="far fa-star fa-2x"></label>
<label class="far fa-star fa-2x"></label>
</div>
<div className="dropdown-menu">
<h5>Unnassigned</h5>
</div>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
export default withStyles(styles)(Tasks);
Any input would be great.
I would recommend starting with a Grid 'skeleton' that looks something like:
<Grid container>
<Grid item container xs={8} direction="column" justify="flex-start">
// Left column contents, with each row as a <Grid item>
</Grid>
<Fab className={classes.fab}><PlayIcon /><Fab>
<Grid item container xs={4} direction="column" justify="space-between" className={classes.right}>
// Right column contents, with each row as a <Grid item>
</Grid>
</Grid>
The direction=column will help you position items vertically within each container. The justify=space-between will ensure that your first item is at the top of the container and your last item (the unassigned text) is at the bottom.
The "right" css class looks like:
right: {
borderLeft: `1px solid ${theme.palette.grey[500]}`,
position: "relative"
}
You can give it a position of "relative" to make it easier to position the fab relative to the column. The "fab" class looks like:
fab: {
position: "absolute",
margin: "auto",
top: 0,
bottom: 0,
left: -28
}
The margin, top, and bottom properties help center the fab vertically, and the left is a bit of a hack based on the dimensions of the fab to center it over the border.
Here's a working draft that brings everything together: https://codesandbox.io/s/tender-torvalds-dlbke?fontsize=14
You can try something like this, or give flex: 1 to anything in the column to make it stretch.
const styles = theme => ({
playButton: {
'& .dropdown-menu': {
marginTop: "auto"
}
}
})