Editor buttons bar takes up full height when resizing webpage in Chrome

[DenisaSurdu]

Expected behavior.

When resizing a page that has the editor, the editor buttons should not take up the full height of the webpage.

Actual behavior.

I'm using froala editor with angular within a web application. When I resize the Chrome webpage, the editor buttons bar takes up the full height of the page.

From dev tools:

Froala version: froala_editor v2.2.4

My Froala config: app.value('froalaConfig', { '"¡¢£¤¥¦§¨©ª«¬­®¯°±²³' + '´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇ' + 'ÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛ' + 'ÜÝÞßàáâãäåæçèéêëìíîï' + 'ðñòóôõö÷øùúûüýþÿŒœŠš' + 'Ÿƒˆ˜ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥ' + 'ΦΧΨΩαβγδεζηθικλμνξοπρςστ' + 'υφχψωϑϒϖ   ‌‍‎‏–—‘’‚“”' + '„†‡•…‰′″‹›‾⁄€ℑ℘ℜ™ℵ←↑' + '→↓↔↵⇐⇑⇒⇓⇔∀∂∃∅∇∈∉∋∏∑−∗√∝' + '∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈' + '⌉⌊⌋⟨⟩◊♠♣♥♦', charCounterCount: false, theme: 'gray', height: '250', inlineMode: false, imagePaste: true, linkAlwaysBlank: true, zIndex: 999, // We have to specify all 'toolbarButtons' options otherwise it will set the default values // see here https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons toolbarButtons: ['bold', 'italic', 'underline', 'color', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo', 'html'], toolbarButtonsMD: ['bold', 'italic', 'underline', 'color', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo', 'html'], toolbarButtonsSM: ['bold', 'italic', 'underline', 'color', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo', 'html'], toolbarButtonsXS: ['bold', 'italic', 'underline', 'color', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo', 'html'], paragraphFormat: { h2: 'Heading 1', h3: 'Heading 2', n: 'Normal', h6: 'Small' }, imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'], imageEditButtons: ['imageDisplay', 'imageAlign', 'imageReplace', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', 'imageAlt', 'imageSize'], linkInsertButtons: ['linkBack'], useClasses: false });

Steps to reproduce the problem.

I have tried to replicate it on Froala website but for now, I am unable to do so. In my application, I have managed to replicate it by:

• Opening a page in Chrome with the editor inside
• Resize the page - see the editor buttons bar taking up the full height of the page.

  OS.

Widows 10

Browser.

Chrome Version 51.0.2704.84 m

[stefanneculai]

This is a Chrome problem that we reported to them (https://bugs.chromium.org/p/chromium/issues/detail?id=606331). We made a workaround for it in V2.3.0, so if you upgrade to the latest version you shouldn't have it anymore.

[DenisaSurdu]

Thanks, I will upgrade. Do you have a mailing list I can subscribe to for release notes - with explicit bug fixes? Unfortunately, the changelog https://www.froala.com/wysiwyg-editor/changelog is not helpful understanding what has been fixed and what was the bug. It is painful have clients reporting bugs because they've updated their Chrome (in the above case) when I could have upgraded to a newer version of Froala and clients would have never been aware of this being a bug.

[stefanneculai]

We do our best to make the changelog as explicit as possible. Unfortunately, we don't have any mailing list with more explicit details.

[DenisaSurdu]

@stefanneculai Could you provide the code change for just this fix - without doing a full upgrade? I would like to have only the fix for this bug within the froala v2.2.4.