Material-UI Drawer: How to position drawer in a specific div

user_7300926 0
Viewed 5843

I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.

<div className="confirmation-drawer">
   <Drawer
       anchor="top" 
       open={state.top} 
       onClose={toggleDrawer('top', false)}>
      <!-- Drawer content goes here -->
    </Drawer>
</div>

I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.

material-ui reactjs
4 Answers

The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.

If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.

https://material-ui.com/api/accordion/

That will allow you to have a small "drawer"-like element that other components can be hidden inside of.

user_139735320

what @Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.

as i said its merely a workaround but i hope it helps somebody.

user_53288910

The code below worked for me. It uses the preferred one-off styling method in the MUI docs. Transitions work without any additional tweaks. Of course make sure you have a 'relative' element up in the DOM tree.

<Drawer
  sx={{
    '& .MuiDrawer-root': {
        position: 'absolute'
    },
    '& .MuiPaper-root': {
        position: 'absolute'
    },
  }}
>
</Drawer>
user_143528410

try this:

import {styled, Drawer as MuiDrawer} from '@mui/material'

const Drawer = styled(MuiDrawer)({
    position: "relative", //imp
    width: 240, //drawer width
    "& .MuiDrawer-paper": {
      width: 240, //drawer width
      position: "absolute", //imp
      transition: "none !important"
    }
})

If you want transitions then use collapse.

<Collapse orientation='horizontal' in={open} >
 <Box> ... </Box>
</Collapse>
user_138600710
Related