user14510391
Reputation:
put the appBar at the bottom of the page
I have a project in order to monitor employees and I have an interface for user modification within the site, and at the bottom of this interface there is this blue-surrounded area which is "bottom App Bar", but I could not control its own style and I want it to be fixed at the bottom of the page even with the scroll.
In addition, "bottom app bar" did not appear on the page.
Noting that the first image is the image pulled from the website for which I want to create an interface similar to the image.
And the second image is the page that I made, but it lacks the "bottom App bar"
How can I solve my problem?
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
resize: {
fontSize: 19,
color: '#828588',
borderBottom: '1px solid #e4e4e4',
borderBottomColor: '#384047'
},
label: {
color: '#d5d6d7',
fontWeight: 560,
fontSize: '1rem',
fontFamily: 'Gotham Pro,Proxima Nova,arial,serif',
},
textField: {
color: '#828588',
background: 'transparent',
paddingTop: '0.5rem'
},
appBar: {
[theme.breakpoints.up('sm')]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
},
dot: {
height: '25px',
width: '25px',
borderRadius: '50%',
display: 'inline-block'
}
}),
);
const MySettings: FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
{/*<Container maxWidth="lg" style={{backgroundColor: 'red'}}>*/}
<Grid container xs={12} md={12}>
<Grid item xs={1} md={1}>
<Avatar style={{width: '5.4rem', height: '5.4rem'}} alt="Remy Sharp"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?
ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-
1.2.1&w=1000&q=80"/>
</Grid>
<Grid item xs={11} md={11} spacing={3}>
<Grid item xs={12} spacing={3}>
<label className={classes.label}>Full name</label>
<TextField
className={classes.textField}
fullWidth
name="name"
placeholder="Enter UserName"
variant="standard"
style={{
// paddingTop:'2.3rem',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="Hiba Youssef"
/>
</Grid>
<Grid item style={{marginTop: '2.4rem'}}>
<label className={classes.label}>Email</label>
<TextField
className={classes.textField}
fullWidth
name="email"
placeholder="Enter Email"
variant="standard"
style={{
// paddingTop:'2.3rem',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="[email protected]"
/>
</Grid>
<Grid item style={{marginTop: '2.4rem'}}>
<label className={classes.label}>Password</label>
<TextField
className={classes.textField}
fullWidth
name="password"
placeholder="Enter New Password"
variant="standard"
style={{
// paddingTop:'2.3rem',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="......"
/>
</Grid>
<Grid item style={{marginTop: '5rem'}}>
<Typography style={{color: '#d5d6d7', fontWeight: 640, fontSize: '1.8rem'}}>
Your color theme
</Typography>
<Grid item spacing={8} container style={{marginTop: '0.6rem'}}>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(123, 104,
238)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(255, 161,
47)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(255, 87,
34)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(244, 44,
44)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(255, 0,
252)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(65, 105,
225)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(95, 129,
255)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(10, 180,
255)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(8, 199,
224)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(7, 160,
146)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(29, 185,
84)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(46, 165,
44)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'rgb(117, 115,
128)'}}></span>
</Grid>
<Grid item>
<span className={classes.dot} style={{backgroundColor: 'red'}}></span>
</Grid>
</Grid>
</Grid>
<Grid>
</Grid>
</Grid>
</Grid>
</div>
);
}
export default MySettings;
Upvotes: 1
Views: 988
Answers (2)
Tiago Martines
Reputation: 1
<AppBar position="fixed" sx={{ top: "auto", bottom: 0 }}></AppBar>
https://mui.com/material-ui/react-app-bar/#bottom-app-bar
Upvotes: 0
user13616016
Reputation:
right here
appBar: {
[theme.breakpoints.up('sm')]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
},
you could probably just add
position: "fixed",
bottom: 0
so that way you have this
appBar: {
[theme.breakpoints.up('sm')]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
position: "fixed",
bottom: 0
},
},
Upvotes: 1
Related Questions
- Is there a way to place the appbar at the bottom in flutter?
- Material-UI: How to bring the Drawer component below the AppBar
- App Bar not filling the top of the page MUI MATERIAL
- disable Appbar paddings from top and bottom
- How to move Material UI tabs to the bottom of a parent like AppBar?
- Content beneath fixed AppBar
- MUI: how to position AppBar on left
- Dock App Bar to top of window in react material ui
- Q: Material-Ui Appbar how to fix scrolling behind browser address bar
- Displaying AppBar at the bottom of Page