CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Claim
Claim

Reputation: 921

Can't remove scrollbar from Material UI Dialog

I have a modal window with a keyboard in it. Everything's fine, except that I can't remove the scrollbar. I tried adding overflow:'hidden' as inline css but still nothing.

Also, even when using container-full padding-0 in bootstrap, the components still won't go till the edge of the screen. So I guess here's the problem.

This is where I render my component

<div className="container-full padding-0">
    <div className="row">
        <div className="col-sm-3">
            <ButtonsGrid list={this.state.list} clicked={this.clicked}/>
        </div>
        <div className="col-sm-3" style={{paddingLeft:0, paddingRight:0}}>
            <ButtonsGrid list = {this.state.list} clicked={this.clicked}/>
        </div>
        <div className="col-sm-6" style={{paddingRight: 0, paddingLeft: 0}}>
           <Keyboard search={this.search}/>  <-------------- HERE
        </div>
     </div>
 </div>

And the component's render looks like this:

render() {
    return(
        <div>
            <Paper 
             onClick={this.toggleKeyboard}>
                <p 
                 style={{
                   fontSize:40, 
                   overflow:'hidden'}}>
                   {this.state.input !== '' ? 
                     this.state.input : 'Search...'}
                </p>
            </Paper>
            <br />

            {this.state.showKeyboard ? 
              <Dialog 
               open={this.state.showKeyboard} 
               maxWidth='md'fullWidth>
                <GridList 
                 cellHeight={50} 
                 cols={11} 
                 style={{overflowX:'hidden'}}>
                    {this.state.keyboard.length > 0 ? 
                     this.state.keyboard.map(key => {
                      return(
                        <Button 
                          disabled={key.value === ''} 
                          key={Math.random()*13} 
                          style={{minWidth: '30px', border: '1px solid'}} 
                          color="default" 
                          onClick={key.value !== 'Enter' ? 
                           () => this.onInputChanged(key.value) : 
                           () => this.search(key.value)}>
                            <div 
                             style={{fontSize:'15px', 
                                     display: 'flex', 
                                     justifyContent: 'center', 
                                     textAlign:'center'}}
                             >
                                {key.value}
                            </div>
                        </Button>
                        )
                    }):null}
                </GridList>
              </Dialog>:''}

            </div>
        );
    }

Also, here's a visual.

If I inspect the element in the browser, I can just uncheck overflow and it removes it.

I tried adding overflow:'hidden' to the div where the component gets rendered but it still wouldn't work.

Any ideas?

Upvotes: 13

Views: 38233

Answers (10)

Pedro Su&#225;rez
Pedro Su&#225;rez

Reputation: 51

This worked for me:

.mat-mdc-dialog-surface {
  overflow: hidden !important;
}

I just have to inspect to find what style is the background that located overflow.

Upvotes: 0

Jo&#227;o Augusto M. Pansani
Jo&#227;o Augusto M. Pansani

Reputation: 91

Inside your sx property add:

'&::-webkit-scrollbar': {display: none}

Upvotes: 9

Joe Robin A
Joe Robin A

Reputation: 21

I was using Material-ui Backdrop faced the same issue. Tried Fatih Turgut approach with a slight difference

import React, { useEffect, useState } from 'react';
import { Backdrop } from '@material-ui/core';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  paper: {
    zIndex: 20,
  },
});

function Example() {
 
  const [open, setOpen] = useState(true);
  useEffect(() => {
    const htmlElement = document.querySelector('body');
 
    if (open || !htmlElement.classList.contains('overflow-hidden')) {
    
      htmlElement.classList.add('overflow-hidden');
    } else {
    
      htmlElement.classList.remove('overflow-hidden');
    }
  }, [open]);



  const classes = useStyles();

  const handleOpen = open => {
    setOpen(open);
  };

  return (
    <Backdrop
      className={classes.paper}
      open={open}
      onClick={() => handleOpen(!open)}
    >
      <h1>hello</h1>
    </Backdrop>
  );
}

export default Example;

Upvotes: 0

user7396942
user7396942

Reputation:

you can try with this:

<DialogContent className={classes.hiddenScroll}>

and their styles:

const useStyles = makeStyles(theme => ({
hiddenScroll: {
    overflow: 'hidden',
  },

Upvotes: 0

Sinuhe Djin Maschio Shin
Sinuhe Djin Maschio Shin

Reputation: 374

Try utilizing the pseudo element -webkit-scrollbar to remove it:

.MuiDialog-paper::-webkit-scrollbar {
  display: none;
}

if it doesn't work you can try:

.MuiDialog-root::-webkit-scrollbar {
  display: none;
}

The downside is that you can't use it inline, but I tested here it works.

Upvotes: 0

Fatih Turgut
Fatih Turgut

Reputation: 349

I solved this problem in functional component in following code.

You should manipulate the overflow attribute of "< html >" tag.

When isOpen is true it will add "overflow-hidden" class to the html tag.

And when isOpen is false, it will remove the "overflow-hidden" class from the html tag.

import React, { useEffect } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';

const MyDialog = (props) => {
  const { isOpen } = props;

  useEffect(() => {
    const htmlElement = document.querySelector('html');
    if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
      htmlElement.classList.add('overflow-hidden');
    } else {
      htmlElement.classList.remove('overflow-hidden');
    }
  }, []);

  useEffect(() => {
    const htmlElement = document.querySelector('html');
    if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
      htmlElement.classList.add('overflow-hidden');
    } else {
      htmlElement.classList.remove('overflow-hidden');
    }
  }, [isOpen]);

  return (
    <div>
      <Dialog
        open={isOpen}
        maxWidth="xl"
      >
        <DialogContent>
    Content 1
    Content 2
        </DialogContent>
      </Dialog>
    </div>
  );
};

And add this class to your global style.

.overflow-hidden {
  overflow: hidden !important;
}

Upvotes: 1

MistyK
MistyK

Reputation: 6242

Just set overflow on DialogContent:

<Dialog
        fullWidth={true}
        maxWidth="xl"
        open={this.state.isChartOpen}
        onClose={() => this.setState({ isChartOpen: false })}
      >
        <DialogContent style={{ overflow: "hidden" }}>
          <ContractPriceChart contracts={this.props.contracts} />
        </DialogContent>
      </Dialog>

Upvotes: 15

Abdulrahman Alhajjah
Abdulrahman Alhajjah

Reputation: 1

put all dialog element in <Dialog><DialogContent>.....</DialogContent></Dialog>here code:

render() {
return(
    <div>
        <Paper 
         onClick={this.toggleKeyboard}>
            <p 
             style={{
               fontSize:40, 
               overflow:'hidden'}}>
               {this.state.input !== '' ? 
                 this.state.input : 'Search...'}
            </p>
        </Paper>
        <br />

        {this.state.showKeyboard ? 
          <Dialog 
           open={this.state.showKeyboard} 
           maxWidth='md'fullWidth>
            <GridList 
             cellHeight={50} 
             cols={11} 
             style={{overflowX:'hidden'}}>
                <DialogContent>
                {this.state.keyboard.length > 0 ? 
                 this.state.keyboard.map(key => {
                  return(
                    <Button 
                      disabled={key.value === ''} 
                      key={Math.random()*13} 
                      style={{minWidth: '30px', border: '1px solid'}} 
                      color="default" 
                      onClick={key.value !== 'Enter' ? 
                       () => this.onInputChanged(key.value) : 
                       () => this.search(key.value)}>
                        <div 
                         style={{fontSize:'15px', 
                                 display: 'flex', 
                                 justifyContent: 'center', 
                                 textAlign:'center'}}
                         >
                            {key.value}
                        </div>
                    </Button>
                    )
                }):null}
            </GridList>
           </DialogContent>
          </Dialog>:''}

        </div>
    );
}

Upvotes: 0

Abdulrahman Alhajjah
Abdulrahman Alhajjah

Reputation: 1

put all dialog element in <Dialog><DialogContent>.....</DialogContent></Dialog>

Upvotes: 0

foxxy
foxxy

Reputation: 11

have you tried adding !important? like this: overflow:'hidden !important'

Upvotes: 0

Related Questions