我有一个带有键盘的模态窗口。一切都很好,除了我无法删除滚动条。我尝试添加 overflow:'hidden'
作为内联css,但仍然没有。
此外,即使使用 container-full padding-0
在 Bootstrap 中,组件仍然不会到达屏幕边缘。所以我想这就是问题所在。
这是我渲染组件的地方
<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>
而组件的
render
看起来像这样: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>
);
}
另外,here's一个视觉。
如果我在浏览器中检查元素,我可以取消选中溢出和它 removes它。
我尝试添加
overflow:'hidden'
到div
组件被渲染的地方,但它仍然无法工作。有任何想法吗?
最佳答案
只需在 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>
关于javascript - 无法从 Material UI 对话框中删除滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49257316/