I'm trying to center two <TextArea> elements using material ui and React.
They are all in the same <div> and have same className. I've tried using the !important designation in CSS. Nothing seems to work on the MUI elements. A traditional <input> does what I want the other two to do using the same CSS. How do I center the <TextField> elements?
JSX
<Container maxWidth="md">
<TextField
id="outlined-read-only-input"
label="Username"
/>
<TextField
id="outlined-read-only-input"
label="Password"
/>
</Container>
CSS
.login__input {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 20px !important;
width: 300px !important;
}
[1]: https://i.stack.imgur.com/qu0xa.png
Try using Grid elements for positioning.
https://mui.com/material-ui/react-grid/
<Grid container justifyContent="center" spacing={2}>
<Grid item xs={10}>
<TextField
id="outlined-read-only-input"
label="Username"
/>
</Grid>
<Grid item xs={10}>
<TextField
id="outlined-read-only-input"
label="Password"
/>
</Grid>
</Grid>
Related
I have a CSS file and I want all the items to be aligned in-line like this:
What I have done so far is:
Its not working as I'm using Material UI. This is my CSS and ReactJS code:
<FormControl component="fieldset">
<RadioGroup column
aria-label="survey"
name="survey"
>
<FormControlLabel
value="dont_schedule"
control={<Radio />}
label={<div>Do not schedule</div>}
labelPlacement="Comedy"
/>
<FormControlLabel
value="sync_once_day"
control={<Radio />}
label={<div>Sync once in a day on
<FormControl className="form__section">
<InputLabel>Age</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
>
<MenuItem value="Monday">Monday</MenuItem>
<MenuItem value="Tuesday">Tuesday</MenuItem>
<MenuItem value="Webnesday">Webnesday</MenuItem>
</Select>
</FormControl>
</div>}
labelPlacement="Crime"
/>
</RadioGroup>
</FormControl>
Here is my CSS:
.form__section{
padding: 50px;
}
Just use flexbox.
.form_section{
display: flex;
align-items:center;
}
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.
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}}
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