diff --git a/example/webpack.config.js b/example/webpack.config.js index fe31291..f651b40 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -16,6 +16,7 @@ module.exports = { loader: 'babel-loader', include: [ path.resolve('src'), + path.resolve('node_modules/measure-scrollbar'), path.resolve('data'), path.resolve('example'), ], diff --git a/package.json b/package.json index db50cec..c9f730a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "url": "https://github.com/missive/emoji-mart/issues" }, "homepage": "https://github.com/missive/emoji-mart", - "dependencies": {}, + "dependencies": { + "measure-scrollbar": "^0.1.0" + }, "peerDependencies": { "react": "^0.14.0 || ^15.0.0-0" }, diff --git a/src/components/picker.js b/src/components/picker.js index dc4214e..d2b5f7b 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -2,6 +2,7 @@ import '../vendor/raf-polyfill' import React from 'react' import PropTypes from 'prop-types' +import measureScrollbar from 'measure-scrollbar' import data from '../../data' import store from '../utils/store' @@ -328,7 +329,7 @@ export default class Picker extends React.Component { render() { var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, include, exclude, autoFocus } = this.props, { skin } = this.state, - width = (perLine * (emojiSize + 12)) + 12 + 2 + width = (perLine * (emojiSize + 12)) + 12 + 2 + measureScrollbar() return