[Drawer] - How to Initialize Drawer Inside Container Element

I’m trying to use a “temporary” right Drawer component, and I want the drawer and it’s backdrop to be contained within the parent div.

I can’t find any working examples of this, and I’m not sure how to target the Backdrop component CSS from my Drawer component.

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate. I found a duplicate issue, but it was for v0.x https://github.com/mui-org/material-ui/issues/5349

Expected Behavior

When specifying a container prop for my Drawer, I expect that the drawer, and it’s backdrop would be enclosed inside that container. Since this is not the case, it’s unclear how to override the desired styles.

It should function similar to this sidebar example

Current Behavior

The Drawer, Modal, and Backdrop components use fixed for their positioning, resulting in them always displaying at the top-right of the viewport.

Context

I created a CodeSandbox with an example scenario.

If you click on the “Open Drawer” button, <DrawerRight> opens to the right of the viewport as expected. It overlays all other elements, including the <Navbar>.

The goal is to have the drawer open, but only overlay elements in it’s containing element.

I attempted to override the styling with classes as shown in the docs

Here is an updated version of the above CodeSandbox with my changes. The main differences are:

1. Pass reference to <MainContent> as container prop to <Drawer>
2. Use withStyles to add styles based on <Drawer> CSS API

Note that the drawer now seemed to be sized correctly, but the backdrop is still covering the entire viewport. Also, the animation has become jittery, with the other elements being shifted while the drawer is opening.

Your Environment

Tech	Version
Material-UI	v1.2.0
React	v16.3.2
browser	Firefox 60.0.1

[LeroyDoornebal]

For anyone that still wonders about the entire solution, the following worked for me.

Please note that I used document.getElementById here and that requires that you set the ID property to that value if you want the drawer to be contained in that element. It should also be possible to use a ref in this case, and that is preferred in my opinion.

Step 1: Set an ID attribute for the element that you want to contain the drawer elements

<div id="drawer-container" style="position: relative">
  <span>Some elements</span>
</div>

Make sure that you add position: relative to this element.

Step 2: Set correct styling and reference to container element on Drawer element.

<Drawer
  open={true}
  onClose={() => {}}
  PaperProps={{ style: { position: 'absolute' } }}
  BackdropProps={{ style: { position: 'absolute' } }}
  ModalProps={{
    container: document.getElementById('drawer-container'),
    style: { position: 'absolute' }
  }}
  variant="temporary"
>
  <span>Some elements</span>
</Drawer>

The things to take away from the example above are the PaperProps, BackdropProps and the ModalProps props. For them to be contained within the container element that we created in step one, these elements have to be absolutely positioned.

Also note the document.getElementById to get a reference to the container element.

[LeroyDoornebal]

Oh Irony, I never got notified for updates on this issue and stumbled into the problems with my implementation myself and found my way back to this thread. In the mean time a lot of updates have been done to material ui, so probably this problem has already been solved, but for people that are still stuck on older versions, I managed to implement it slightly different to get around the weird animations when you change the anchor.

  <Box style={{ overflow: 'hidden' }}>
    <Backdrop open={open} style={{ zIndex: 1199, position: 'absolute' }} />
    <MuiDrawer
      anchor={fromSide}
      open={open}
      onClose={onClose}
      PaperProps={{
        style: {
          width: width || '90%',
          position: 'absolute',
          maxWidth: maxWidth || 'initial',
          border: 'none'
        }
      }}
      ModalProps={{
        container: document.getElementById('some-id`), // Or ref ofcourse :)
        disableEnforceFocus: true,
        style: { position: 'absolute' }
      }}
      variant="persistent"
      {...props}
    >
      {children}
    </MuiDrawer>
  </Box>

The biggest issue I had with using the “permanent” variant is that it did not work out of the box with the backdrop, so I separated that by using the backdrop directly. Be aware that this implementation worked for my specific use case, maybe it gives you some ideas.