I'am trying to make a custom bullet graph with material UI, my idea is 2 MuiLinearProgress bar next to each other with a vertical Divider in between. I can't seem to find a way to display them next to each other.
<div className={classes.bulletGraph}>
<div>
<LinearProgress
className={classes.firstBar}
value={80}
variant="determinate"
title="test"
/>
</div>
<div>
<LinearProgress
className={classes.secondBar}
value={0}
variant="determinate"
/>
</div>
</div>
I tried using display flex on the parent but it makes them disappear, I also tried inline block and I got the same result.
Wrap your <LinearProgress> with <Grid> component.
<Grid spacing={1} container>
<Grid xs item>
<LinearProgress value={80} variant="determinate" title="test" />
</Grid>
<Grid xs item>
<LinearProgress color="secondary" value={0} variant="determinate" />
</Grid>
</Grid>
Live demo
You can set different spacing and ratios beetween items.
You can get the LinearProgress component working with Flexbox as follows:
<div style={{ display: "flex", flexDirection: "row" }}>
<LinearProgress
value={80}
variant="determinate"
title="test"
style={{ width: "100%", marginRight: "4px" }}
/>
<LinearProgress
color="secondary"
value={0}
variant="determinate"
style={{ width: "100%" }}
/>
</div>
Setting the width to 100% fixes the issue with this component disappearing when used with Flexbox. Note that I'd typically put these styles in a CSS file, but put them in a style property here to keep this snippet simple.
You can see this working here:
you can just add flex-grow to each LinearProgress when the parent has display flex:
sx={{flexGrow:1}}
Related
Here i'm using material-ui i want to fix the full video width in the screen. i used width:auto and attached a below image ,can any one please help me . how to fix this thanks in advance
this is my code:-
<Row className="waitingVideo">
<Col xs={3} className="waitingRoom">
<WaitingRoom customerList={waitingRoom} accept={accept} chat={chat} reject={reject}></WaitingRoom>
<Accordion className={classes.customers}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>customer 1</Typography>
<ChatIcon className={classes.chat} onClick={chat}></ChatIcon>
</AccordionSummary>
<AccordionDetails>
<Typography>Lorem gkfgs shfksk sfkugsk sfkugs hfgsek</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>customer 2</Typography>
<ChatIcon className={classes.chat} onClick={chat}></ChatIcon>
</AccordionSummary>
<AccordionDetails>
<Typography>Lorem gkfgs shfksk sfkugsk sfkugs hfgsek</Typography>
</AccordionDetails>
</Accordion>
</Col>
<Col xs={9}>
<video meta name="viewport" content="width=device-width" id="localVideo" width="auto" autoPlay playsInline controls={false} muted={true}/>
</Col>
</Row>
Try using height: 100vh to use only the viewable height of the window. If you need to trim it down for other content on screen, you can use calc(100vh - 80px).
I am using React and Material UI React for my application. I want the site to utilize the AppBar component with content below, but I don't want the content to cause scrolling on the entire page; I want my content to take up the maximum remaining height and the page width.
Layout.tsx:
<AppBar position="static" component="header">
<Toolbar>
<Logo className={classes.logo} />
<div className={classes.grow} />
<IconButton className={classes.avatar} edge="end">
<Avatar />
</IconButton>
</Toolbar>
</AppBar>
<Container className={classes.content} component="main">
{props.children}
</Container>
I've been trying different combinations of the available position for the AppBar, which are "static" | "fixed" | "absolute" | "sticky" | "relative" | undefined, along with different heights and widths for the content, but no combination seems to work.
You can try MUI's scroller hook to anchor the bar: https://next.material-ui.com/components/app-bar/#elevate-app-bar, or constraint the container to the window like I did with your code here: https://codesandbox.io/s/mui-full-page-no-scroll-whecl?file=/demo.js.
You can use sx={{maxHeight: 20vh for appBar and 80vh for the content}}
<AppBar position="static" component="header" sx={{maxHeight:20vh}}>
<Toolbar>
<Logo className={classes.logo} />
<div className={classes.grow} />
<IconButton className={classes.avatar} edge="end">
<Avatar />
</IconButton>
</Toolbar>
</AppBar>
<Container className={classes.content} component="main" sx={{maxHeight:80vh}}>
{props.children}
</Container>
I have a very simple problem in my React app. How can i remove the scrollbar in my page?
I think this is because of the height that i put which is 100vh. However, if i remove the AppBar, the scrollbar disappears. How would i fix this problem?
Pls check my codesandbox here Click here
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">News</Typography>
</Toolbar>
</AppBar>
<Grid container component="main" className={classes.root}>
<CssBaseline />
<Grid item xs={false} sm={4} md={7} className={classes.image} />
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Box mt={5}>
<Copyright />
</Box>
</form>
</div>
</Grid>
</Grid>
</div>
You have set height: 100vh for your main section. And the AppBar section is out of the main section. If you want to remove scrollbar, you need to remove the height of the AppBar, which is 64px, when you set height for the main section:
height: calc(100vh - 64px);
there are two ways to do this.
First is to simply add the position="fixed" prop in material-ui Appbar. It'll make the header fixed and the rest other elements will adjust accordingly. But to keep the UI the same add padding equals the Appbar height (around 64px).
The second method is to just add the paddingTop to Grid container equals to the Appbar height keeping the position="static" prop same. or also another way is to minus the appbar height from total height i.e; "calc(100vh - 64px)"
The important point is here to decrease the appbar height from the Grid container for static appBar
AppBar size (height) may not always be 64px, maybe in your case its fine.
In my case
<AppBar position="sticky">
fixed the issue.
If this doesn't work in your case, there might be some other styling affecting the result.
For context, I also have the below styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #root {
height: 100%;
width: 100%;
}
Where #root is the main (root) div with id root where React renders all the components
ReactDOM.createRoot(document.getElementById('root'));
I would to like align the button vertically center within this grid. I have tried vertical-align but there is no effect. I am able to adjust the vertical position of the button using top: "30%" but I don't think that is the best way to center the button.
<form className={classes.container} noValidate autoComplete="off">
<Grid container spacing={1}>
<Grid item xs={5}>
<TextField
id="standard-name"
label="AWS account"
className={classes.textField}
margin="normal"
/>
</Grid>
<Grid item xs={7}>
<Button variant="contained" color="primary" className={classes.button}>
Link AWS account
</Button>
</Grid>
</Grid>
</form>;
Here is what you need Grid API . Prop alignItems with center value. Read about flexbox in CSS and always check the docs first.
Is there any way to create one column of same-width items with Material-UI Grid system? I have the following code
<Grid container align="center" direction="column">
<Grid item className={classes.item}>
<img src={logo}/>
</Grid>
<Grid item>
<TextField label={messages.login.username} fullWidth />
</Grid>
<Grid item >
<TextField label={messages.login.password} fullWidth />
</Grid>
<Grid item>
<Button color="primary" raised>{messages.login.loginBtn}</Button>
</Grid>
</Grid>
Ideally I want all the Grid items to be of equal width, possibly the width of their container. I have tried setting xs=12 on all items but nothing changes.
In the Grid container try to replace the align="center" with align="stretch", so that all the Grid items will stretch and have the same width as their parent.
This demo in the documentation is explanatory and fun to play with