diff --git a/src/Annotator.scss b/src/Annotator.scss index 7d7a402b5..05d907150 100644 --- a/src/Annotator.scss +++ b/src/Annotator.scss @@ -327,6 +327,15 @@ $tablet: 'max-width: 768px'; } } +.bp-create-annotation-dialog .bp-create-comment { + background-color: $white; + overflow-x: hidden; + overflow-y: auto; + padding: 9px; + white-space: normal; + width: 267px; // Hard-coded width to solve layout issues +} + .bp-point-annotation-marker { background-color: transparent; border-style: none; diff --git a/src/CommentBox.js b/src/CommentBox.js index fcc98bcc6..dca0f64c3 100644 --- a/src/CommentBox.js +++ b/src/CommentBox.js @@ -87,6 +87,11 @@ class CommentBox extends EventEmitter { this.placeholderText = config.localized.addCommentPlaceholder; this.containerEl = this.createCommentBox(); + + // Explicit scope binding for event listeners + this.focus = this.focus.bind(this); + this.onCancel = this.onCancel.bind(this); + this.onPost = this.onPost.bind(this); } /** @@ -271,10 +276,10 @@ class CommentBox extends EventEmitter { // Add event listeners if (this.hasTouch) { - this.textAreaEl.addEventListener('focus', this.focus.bind(this)); + this.textAreaEl.addEventListener('focus', this.focus); containerEl.addEventListener('touchend', this.preventDefaultAndPropagation.bind(this)); - this.cancelEl.addEventListener('touchend', this.onCancel.bind(this)); - this.postEl.addEventListener('touchend', this.onPost.bind(this)); + this.cancelEl.addEventListener('touchend', this.onCancel); + this.postEl.addEventListener('touchend', this.onPost); } else { this.textAreaEl.addEventListener('focus', this.focus); this.cancelEl.addEventListener('click', this.onCancel);