CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uireact-component
Subhojit
Subhojit

Reputation: 1541

Material-ui drawer width issue

I'm facing an issue with material-ui drawer. I've changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don't want to make it visible on the page while I haven't clicked the button. It might be having an issue with the transform attribute now.

So I changed it to transform: translate(350px, 0px) but then I'm getting another issue, that is if I am clicking the button the drawer is not showing up. Any help on this thing ??

I have got the solution and edited the code.

I've created a Demo here => Have a look

Also shared the code below:

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer 
                  open={this.state.openDrawer}
                  containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));

style.css

h1, p {


font-family: Lato;
}

.show-drawer {
  top: 47px !important;
  text-align: left !important;
  width: 80% !important;
  transform: translate(0%, 0px) !important;
}

.hide-drawer {
  top: 47px !important;
  text-align: left !important;
  width: 80% !important;
  transform: translate(100%, 0px) !important;
}

/* .drawer-side-drawer:focus {
  top: 47px !important;
  text-align: left !important;
  width: 350px !important;
  transform: translate(0px, 0px) !important;
} */

.drawer-title-div {
  display: inline-block;
  width: 100%;
  background: #F2F8FB;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
}

.drawer-title-text {
  display: inline-block;
  margin-left: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #484848;
  font-family: Muli;
  font-size: 16px;
  font-weight: 600;
}

Upvotes: 13

Views: 54549

Answers (8)

Walter Monecke
Walter Monecke

Reputation: 2558

One way to solve this issue is by getting the parent width:

const parentRef = useRef<HTMLDivElement>(null);

 <Box
  ref={parentRef}
 >
  <Drawer
    PaperProps={{
      sx: {
        width: parentRef?.current?.clientWidth || 0,
      },
    }}
  >
    // content goes here
  </Drawer>
</Box>

Upvotes: 1

Kashif Sulehria
Kashif Sulehria

Reputation: 77

Just add PaperProps={{ style: { width: '25%' } }} to your MUI Drawer.

Most Probably it will work for everyone.

Upvotes: 5

djadweb
djadweb

Reputation: 33

I had the same problem.

you just have to add the PaperProps to your drawer

Upvotes: -2

ghchoi
ghchoi

Reputation: 5156

You can use window.innerWidth as width: 100%:

    <Drawer ...>
        <div style={{width: window.innerWidth * 0.25}}>
            ...
        </div>
    </Drawer>

Upvotes: -1

Frederic Eid
Frederic Eid

Reputation: 641

For mui version 5, you have to use the PaperProps prop like so:

        <Drawer
          PaperProps={{
            sx: { width: "90%" },
          }}
        >{...Child elements here}</Drawer>

Upvotes: 39

Mohammed Alshaer
Mohammed Alshaer

Reputation: 503

you can simply add this to index.css

.MuiDrawer-paper {
width: 60% !important;
}

@media (max-width: 1200px) {
    .MuiDrawer-paper {
 width: 100% !important;
 }
}

Upvotes: 6

Himanshu Bansal
Himanshu Bansal

Reputation: 2093

Drawer-Material-UI If you look at the link.. you will find Drawer properties..

width (union: string number) [default : null] The width of the Drawer in pixels or percentage in string format ex. 50% to fill half of the window or 100% and so on. Defaults to using the values from theme.

so just update the tag with width and you are good to go,

<Drawer width="50%"></Drawer>

Check it here..

The drawer width is not matching the theme drawer width which was causing the problem.. not the transform CSS attribute.

Just a different approach ^^

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Responsive from 'react-responsive-decorator'; // This decorator allows using the library as a decorator.

@Responsive
class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false,
      width:350
    };

  }
  // Update for kinda media query thing
  componentDidMount() {
    this.props.media({ minWidth: 768 }, () => {
      this.setState({
        width: 350
      });
    });
  this.props.media({ maxWidth: 768 }, () => {
      this.setState({
        width: 150
      });
    });
  }
  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer width={this.state.width} //<- Update
                  open={this.state.openDrawer}
                  containerClassName="drawer-side-drawer"
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));

Upvotes: -1

Parvinder Singh Saluja
Parvinder Singh Saluja

Reputation: 24

You can try adding a toggle class and you can get rid of the transform.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer containerClassName={!this.state.openDrawer ? "hide-drawer": "show-drawer"} 
                  open={this.state.openDrawer}
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));

Upvotes: 1

Related Questions