The Material UI Drawer appears to be stuck and unresponsive when trying to move it beneath the

Question

The Material UI Drawer appears to be stuck and unresponsive when trying to move it beneath the

I am working on designing an interface with an Appbar and a drawer below it. Each component contains three divs with Bootstrap, housing groups of buttons.

The issue I am facing is that the Drawer is covering the Appbar and I am struggling to reposition it.

Below is the code snippet I am currently using:

<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>

Following the first bootstrap column, there is another "col-sm-4" and then a "col-sm-2". All the buttons are placed in a GridList.

For a visual representation, you can check out the image here.

The Drawer should ideally start where the arrows intersect. Any suggestions on how to achieve this?

html css reactjs material-ui

Answer 1

Answer №1

The documentation for Material-UI refers to this as a Drawer that is positioned beneath the app bar. In order to achieve this effect, you must first assign a specific z-index value to your AppBar within the styles object:

const styles = theme => ({
  appBar: {
    // Ensure the app bar z-index is one level above the drawer
    zIndex: theme.zIndex.drawer + 1,
  },
});

This custom styling should then be applied to the AppBar component like so:

<AppBar position="absolute" className={classes.appBar}>

To prevent content in the drawer from being hidden under the app bar, you will need to adjust its positioning on the screen using the theme.mixins.toolbar. First, define the styles for the toolbar:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  toolbar: theme.mixins.toolbar,
});

Next, insert the following div at the beginning of your drawer's content:

<Drawer>
  <div className={classes.toolbar} />
  
  // Add other content for the drawer here as needed
</Drawer>

The toolbar style incorporates information about the app bar height from the current theme, ensuring that the content remains visible above the app bar.

A complete code example can be found here.

Answer 2

The documentation for Material-UI refers to this as a Drawer that is positioned beneath the app bar. In order to achieve this effect, you must first assign a specific z-index value to your AppBar within the styles object:

const styles = theme => ({
  appBar: {
    // Ensure the app bar z-index is one level above the drawer
    zIndex: theme.zIndex.drawer + 1,
  },
});

This custom styling should then be applied to the AppBar component like so:

<AppBar position="absolute" className={classes.appBar}>

To prevent content in the drawer from being hidden under the app bar, you will need to adjust its positioning on the screen using the theme.mixins.toolbar. First, define the styles for the toolbar:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  toolbar: theme.mixins.toolbar,
});

Next, insert the following div at the beginning of your drawer's content:

<Drawer>
  <div className={classes.toolbar} />
  
  // Add other content for the drawer here as needed
</Drawer>

The toolbar style incorporates information about the app bar height from the current theme, ensuring that the content remains visible above the app bar.

A complete code example can be found here.

Answer 3

Answer №2

With the release of MUI v5, there have been changes to the default zIndex values:

const zIndex = {
  mobileStepper: 1000,
  fab: 1050,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
};

This adjustment is significant as it clarifies why the drawer overlaps the appBar.

To address this issue in a different way using ThemeProvider, one can simply switch these values in Typescript:

// ./theme/index.tsx

import {
  ThemeProvider as MUIThemeProvider,
  createTheme,
} from "@mui/material/styles";
import { ReactNode } from "react";

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const theme = createTheme({ zIndex: { appBar: 1200, drawer: 1100 } });
  return (
    <MUIThemeProvider theme={theme}>
      {children}
    </MUIThemeProvider>
  );
};

// ./App.tsx

import { ThemeProvider } from "./theme";

function App() {
  return (
    <div className="App">
      <ThemeProvider>
        // your component(s)
      </ThemeProvider>
    </div>
  );
}

Answer 4

With the release of MUI v5, there have been changes to the default zIndex values:

const zIndex = {
  mobileStepper: 1000,
  fab: 1050,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
};

This adjustment is significant as it clarifies why the drawer overlaps the appBar.

To address this issue in a different way using ThemeProvider, one can simply switch these values in Typescript:

// ./theme/index.tsx

import {
  ThemeProvider as MUIThemeProvider,
  createTheme,
} from "@mui/material/styles";
import { ReactNode } from "react";

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const theme = createTheme({ zIndex: { appBar: 1200, drawer: 1100 } });
  return (
    <MUIThemeProvider theme={theme}>
      {children}
    </MUIThemeProvider>
  );
};

// ./App.tsx

import { ThemeProvider } from "./theme";

function App() {
  return (
    <div className="App">
      <ThemeProvider>
        // your component(s)
      </ThemeProvider>
    </div>
  );
}

The Material UI Drawer appears to be stuck and unresponsive when trying to move it beneath the

Answer №1

Answer №2

Similar questions

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

Acquire a handle on the object being hovered over in three.js using react

Every time I attempt to maintain an object's state, TypeScript keeps throwing this error at me

Utilizing Bootstrap to arrange table cells in a shifted manner

Changing Ionic Column Widths Based on Content Length

Role in HTML/CSS

In a React Redux application, I struggle with typing in the input fields and making changes

Is it possible to dynamically change the primary and secondary color of the Material UI theme palette during runtime?

Execute Django code post webpage loading

Install legacy React together with semantic-ui and Gulp using npm

What mechanisms do chat apps use to detect when a user sends a message and trigger a re-render of the chat

"Discrepancy in column display across various resolutions in Bootstrap 5.3 causing issues

Issue with Paypal Express Checkout page appearance in Firefox browser

The problem I am encountering with particles.js

What are the steps for importing a file into a React app that is built using Create React App as plain text?

Error with jquery.mobile-1.4.5.min.css in Android webview following recent Marshmallow update has caused compatibility issue

DaisyUI special design for managing inactive buttons

While React remounts every component during development, it is puzzling that the screen only shows the UI snapshot of a single component

Tips for designing an Ionic app with a Pinterest-inspired layout

Issue with React hook state persistence in recursive function