display prop causes: left 100%

[uptownhr]

I'm rendering a sample component in the react-color repo and after toggling the display on, i do not see the color picker as left:100% is there. This puts the picker off screen. Am I not using this correctly?

'use strict';

const { React, Base } = require('./base');
const ColorPicker = require('react-color');

module.exports = class Button extends Base {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  handleClose() {
    this.setState({ displayColorPicker: false });
  }

  render() {

    var style = {
      height: '100%'
    };

    return (
      <div style={style}>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker display={ this.state.displayColorPicker } onClose={ this.handleClose } type="sketch" />
      </div>
    );
  }
};

[casesandberg]

@uptownhr It goes 100% to the left of a div, you have to make sure the wrapper div does not go off screen.

I am working on some better positioning for it as we speak!