style={{ position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }}
which seems to place an overlay over the whole document (including the scroll bar) to which a click event is attached that closes the PickerDialog.
I think a solution would be to use "width" instead of "right" and make it as wide as the ColorPicker instead. That works in the debugger at least.
I would be happy to supply such a PR, if that's the intended behavior, but I don't know how to run and test it locally. I'm fairly new to HTML/CSS/Javascript and web development in general and started learning React and Material-UI less than a month ago so I'm still struggling to understand what the code I've copy-and-pasted into my application from different examples actually does. Apologies if I'm using the ColorPicker in the wrong way. Please correct me if I've done something wrong.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import ColorPicker from 'material-ui-color-picker'
const styles = {
mystyle: {
width: '250px', // 225px is the picker dialog width
height: "300px", // less than half the screen height
overflowY: 'auto',
},
};
const pickers = [
'pickerA',
'pickerB',
'pickerC',
'pickerD',
'pickerE',
'pickerF',
'pickerG',
];
class App extends Component {
render() {
const { classes } = this.props;
return (
<Drawer
variant="persistent"
anchor='left'
open='true'
classes={{
paper: classes.mystyle,
}}
>
{pickers.map((picker) =>
<ColorPicker
name={picker}
label={picker}
key={picker}
defaultValue='#123456'
onChange={() => console.log('change')}
/>
)}
</Drawer>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(App);
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ColorPicker from 'material-ui-color-picker'
const styles = {
mystyle: {
width: '250px', // 225px is the picker dialog width
height: "300px", // less than half the screen height
overflowY: 'auto',
},
};
const pickers = [
'pickerA',
'pickerB',
'pickerC',
'pickerD',
'pickerE',
'pickerF',
'pickerG',
];
class App extends Component {
render() {
const { classes } = this.props;
return (
<div id="mydiv" className={classes.mystyle}>
{pickers.map((picker) =>
<ColorPicker
name={picker}
label={picker}
key={picker}
defaultValue='#123456'
onChange={() => console.log('change')}
/>
)}
</div>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(App);
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent