Material-ui drawer inside a container

user_5267546 0
Viewed 4331

How to set material-ui drawer inside a container in reactjs?

I wrapped my app page in container with 600px max width. I would like to set the drawer to start into that container not in the body page (picture). I am using app bar position as absolute to implement on scroll events, so would not like to change it.

Here is codesandbox example code: https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js

I found a discussion about it here, but I did not figure out how to make it work in my example. From that I tried:

        ModalProps={{
          container: document.getElementById("appContainerDiv"),
          style: { position: "absolute" }
        }}
drawer material-ui reactjs javascript
1 Answers

Ciao, consodering that you set drawerPaper with absolute position, I think the only thing you could do is set your style as:

drawerPaper: {
    minWidth: 100,
    width: "20%",
    position: "absolute",
    right: '12%',
    height: '75%',
  },

and the result will be:

enter image description here

note that this solution is not responsive!

Here your code modified.

user_138970650
Related