3

I have created a Material UI Screen. In which have this structure

<div>
<Router>
  <Appbar>
  </Appbar>

  <Drawer>
  </Drawer>

  <main>
  </main>
</Router>
</div>

I have used the variant="permanent" for the Drawer.

Issue: The content inside the main tag is a big table with lots of column. I have used it outside of the Drawer class. but when scroll horizontally on the left in the table container, the drawer also goes left along with it. I am using permanent variant, then too it goes left.

Any idea on this one. What i think is that Drawer and the main tag are attached so scrolling left the table, scroll both of them.

The Appbar position is fixed. Trying to make the navigation drawer to be fixed too; This is the mockup how it looks like.

Update: Moved the code to Codepen https://1hi76.csb.app/

  • Hello Ani , you're missing the props "anchor" and you have a container, which the Drawer component dosen't have. Have a look at their examples at : https://material-ui.com/components/drawers/ – Makusium Jun 12 '20 at 20:26
  • @Makusium I tried with the anchor too. but it still goes to the left with the content scroll to left – Aniruddhsingh Rathore Jun 12 '20 at 21:09

1 Answers1

4

You can set overflow: auto to main tag:

content: {
  flexGrow: 1,
  padding: theme.spacing(3),
  overflow: "auto"
}

Here is a sandbox

Bertrand Martel
  • 42,756
  • 16
  • 135
  • 159