Issue
I have an Appbar and a drawer right beneath it. Under both components I have 3 divs
with bootstrap and in each div
I have a group of buttons.
The problem is that the Drawer covers the Appbar and I just can't seem to move it.
Here's my code:
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" aria-label="Menu">
title
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
style={{width: '100%', zIndex: '1400', position:'absolute'}}
>
<Button>1</Button>
<Button>2</Button>
<Divider />
<Button>1</Button>
<Button>2</Button>
</Drawer>
<br />
<div className="container-full">
<div className="row">
<div class="col-sm-6">
<GridList cellHeight={50} className={styles.gridList} cols={5}>
<Button style={{width: '150px', border: '1px solid'}} variant="raised" color="primary">
<div
style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
Mohnweckerl Wiener Gouda
</div>
</Button>
After the first bootstrap column, another "col-sm-4"
follows and then a "col-sm-2"
. The buttons are in a GridList
Here's a visual
The Drawer should start where the arrows meet.
Any ideas?
Solution
The Material-UI docs call that a Drawer that's been clipped under the app bar. To achieve it, you first have to define a z-index
for your AppBar
your styles
object:
const styles = theme => ({
appBar: {
// Make the app bar z-index always one more than the drawer z-index
zIndex: theme.zIndex.drawer + 1,
},
});
And then apply that to the AppBar
component:
<AppBar position="absolute" className={classes.appBar}>
Since your drawer is now underneath the AppBar
, you'll need to move the content in the drawer down the screen so that it is not hidden underneath the bar. You can accomplish that with theme.mixins.toolbar
. First, add the toolbar
styles:
const styles = theme => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
// Loads information about the app bar, including app bar height
toolbar: theme.mixins.toolbar,
});
Then, add the following div
as the very first piece of content in your drawer:
<Drawer>
// Make sure this div is the first piece of content in your drawer
<div className={classes.toolbar} />
// Put your other drawer content here like you normally would
</Drawer>
The toolbar
style will load information about the app bar height from the current theme
and then size the div
so that it ensures the content doesn't get hidden by the app bar.
You can find a full code sample here.
Answered By - Jules Dupont
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.