Can't remove scrollbar from Material UI Dialog
Solution 1
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>
Solution 2
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;
}
![Claim](https://i.stack.imgur.com/lDns1.png?s=256&g=1)
Claim
Welcome to this awesome page - check out my profile picture. By day: Java/React Programmer By night: Techno geek
Updated on June 13, 2022Comments
-
Claim about 2 years
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 thediv
where the component gets rendered but it still wouldn't work.Any ideas?
-
Claim over 6 yearsI just did. The scrollbar is still there. Thing is, I don't even know to which component it belongs to.
-
Claim over 6 years
-
foxxy over 6 yearsIf you want to add a <DialogTitle>, you can add a margin-top inside the <DialogContent> so that the keyboard border at the top will not be cut. Hope this helps.
-
Claim over 6 yearsMhh I would like to possibly remove the spare space around the keyboard's grid.
-
Vicky Dev over 4 yearsPlease provide more info & brief explanation about the answer you're posting and try to wrap up the code into codeblock using Ctrl+K after selecting the code, but first put the code into newline.