search

tinymce / tinymce-angular

Official TinyMCE Angular Component
MIT License
320 stars 92 forks source link

Inline TinyMCE toolbar is 1 pixel too small in width, forcing itself to create another toolbar row for no reason #351

Closed MichaelJFordham closed 2 weeks ago

MichaelJFordham commented 1 year ago

What is the current behavior? I have been using TinyMCE as an inline text editor in our Angular app for over a year and it has all been working perfectly. However in the last week, for reasons I'm not sure of, the inline toolbar now forces itself to two rows. It doesn't matter how much space the first row has, the second row is always created, which in turn blocks the text being input in the editor, and therefore creates a problem for our users as they can't see what they're typing.

I have been trying to find a way to resolve this all afternoon using the TinyMCE docs or CSS hacks. I found the problem appeared to be that the element which contains the TinyMCE editor in the iframe is a single pixel too small now, meaning that there is never enough room for the final toolbar button no matter how many buttons there are.

Here is an example of the problem:

Screenshot 2023-04-12 at 15 58 51

Here's what it looks like when I change the width from 629px to 630px:

Screenshot 2023-04-12 at 15 59 17

In our styles.scss file I have used this CSS rule which forces the width to be 630px as a temporary workaround:

.tox-tinymce-inline { width: 630px !important; }

However, it feels like there may have been a recent update to this library which may have caused the issue so I wanted to flag it.

What is the expected behavior? The toolbar should only have one row, with no wrapping of toolbar buttons especially when there is more than sufficient horizontal space for the toolbar buttons.

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular? Up until last week this worked as expected.

TinyMCE-Angular version: 6.0.1 TinyMCE version: 6.3.1 Browsers: Google Chrome, Safari OS: Mac OS (11.7.1)

TinyITAdmin commented 1 year ago

Ref: INT-3175

gabrielpfl commented 1 year ago

I'm experiencing the same issue, any way to solve it?

danoaky-tiny commented 2 weeks ago

This issue was addressed in core tinymce https://github.com/tinymce/tinymce/pull/9398

Let us know if the issue persists.