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?
To hide the horizontal scroll bar, we can use the overflow-x: hidden property.
The value of a scroll bar cannot reach its maximum value through user interaction at run time. The maximum value that can be reached through user interaction is equal to 1 plus the Maximum property value minus the LargeChange property value.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With