From 2594dce8b09c2f45a98ed6cd7b124d6e8f992993 Mon Sep 17 00:00:00 2001 From: jquense Date: Thu, 18 Jun 2015 00:01:18 -0400 Subject: [PATCH] [fixed] Modal Null Exception when react-bootstrap is loaded before the Body tag Make scrollbar size check lazy, Only called after components have mounted. fixes #849 --- src/Modal.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Modal.js b/src/Modal.js index bcd6c2db7e..e97d0da981 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -54,7 +54,11 @@ function onFocus(context, handler) { let scrollbarSize; -if (domUtils.canUseDom) { +function getScrollbarSize(){ + if ( scrollbarSize !== undefined ){ + return scrollbarSize; + } + let scrollDiv = document.createElement('div'); scrollDiv.style.position = 'absolute'; @@ -64,13 +68,13 @@ if (domUtils.canUseDom) { scrollDiv.style.overflow = 'scroll'; document.body.appendChild(scrollDiv); - scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth; - document.body.removeChild(scrollDiv); + scrollDiv = null; } + const Modal = React.createClass({ mixins: [BootstrapMixin, FadeMixin], @@ -210,7 +214,7 @@ const Modal = React.createClass({ this._originalPadding = container.style.paddingRight; if (this._containerIsOverflowing) { - container.style.paddingRight = parseInt(this._originalPadding || 0, 10) + scrollbarSize + 'px'; + container.style.paddingRight = parseInt(this._originalPadding || 0, 10) + getScrollbarSize() + 'px'; } if (this.props.backdrop) { @@ -308,8 +312,8 @@ const Modal = React.createClass({ return { dialogStyles: { - paddingRight: containerIsOverflowing && !modalIsOverflowing ? scrollbarSize : void 0, - paddingLeft: !containerIsOverflowing && modalIsOverflowing ? scrollbarSize : void 0 + paddingRight: containerIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : void 0, + paddingLeft: !containerIsOverflowing && modalIsOverflowing ? getScrollbarSize() : void 0 } }; }