Right border of editor area no longer visible since 4.6.0

[iionly]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Right border of editor area is not visible anymore since 4.6.0.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

Element info in browser on any 4.6.x version for the editor area gives

<div id="mceu_35" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden;border-width: 1px;width: 100%;">

while on 4.5.x it is

<div id="mceu_35" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px;">

The additional width: 100%; since 4.6.0 seems to be the problem causing the right border to be hidden. Disabling it with the browser's dev tools makes the right border visible again.

But where is the width: 100%; coming from?

What is the expected behavior?

Of course, the border being visible as before again.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

• Problem started with version 4.6.0 while it still worked fine on 4.5.x,
• Using jquery.tinymce.min.js,
• Testing on Linux,
• Issue both in FF and Chrome.

[spocke]

Can you setup a test case at http://fiddle.tinymce.com that reproduces the issue so that we can look at it. Thanks

[iionly]

I'm afraid I don't think I can set up a test case in fiddle that would help reproducing the issue. I'm making use of tinymce within an Elgg plugin (https://github.com/iionly/extended_tinymce) and it might be the way tinymce gets loaded (jquery version of tinymce, within an AMD module) that might cause the issue with the border now. But I haven't made any changes in the my tinymce init between 4.5.x and 4.6.x at all. The problem was just there starting with 4.6.0 possibly due to the additional width: 100% in the div's style causing the toolbar panel already being 100 % within an editor area already at 100%.

[Kobee1203]

I reproduce the problem with Bootstrap 3.2 and a basic configuration of tinymce.

Here is an example to reproduce the problem: https://codepen.io/anon/pen/JyvxZN

I fixed this issue with the following CSS:

.mce-tinymce {
  width: calc(100% - 2px) !important;
}

[iionly]

I got it working just now by adding width:auto !important; to .mce-panel class and then also adding width:100% !important; to div.mce-fullscreen.

[iionly]

Why has the issue been closed? It's still unresolved. And the "needs for info" request has been answered by @Kobee1203 who provided an example.

[Kobee1203]

I don't understand how tickets are processed at TinyMCE.

I have the impression that as soon as a problem doesn't suit the developers, they don't bother! They close the ticket without explanation.

This behavior does not really push the solution integrators to switch to the pro version.

[fyrkant]

@iionly Sorry I just read your "I got it working" and figured it was resolved.

@Kobee1203 We are doing our best to make TinyMCE the best it can be, but with something that has as many users as TinyMCE it is hard to keep on top of all the user issues.

[OlivierJaquemet]

@fyrkant I'm sure you are doing your best to deal with the huge amount of issues which are being entered for TinyMCE, and your work is appreciated ! TinyMCE is a wonderful piece of software and we owe it all to you and your team.

One suggestion though : when you close an issue, give an explanation on why you close it (in this case you though it was not a bug, and it has been resoled on the user side).
Giving an explanation provides better understanding / acceptance for the reporter. Or much better for the whole quality of the project, it helps the the reporter (or other participant of the issue) to add more precision on the issue (a reproduction procedure, a fix suggestion or anything else) for a valid reopening and a proper handling on your side when possible.

That said, thanks for re-opening this one, keep up the good work !

[pruhstal]

Definitely still broken as of: @tinymce/tinymce-react": "^2.2.0" and tinymce.min.js (4.7.9 (2018-02-27))

Another hack you can try is:

div.mce-edit-area {
  padding-right: 1px;
}

[thedrjim]

This issue has been closed due to inactivity. Tiny will soon be working with members of the community to close other old issues on our GitHub repositories.

Please note the official support window for TinyMCE 4 is ending on December 31, 2020. If you haven't already upgraded to TinyMCE 5 it is highly encouraged that you do so. Upgrading will give you access to the latest releases and updates made to our WYSIWYG editor focused on bringing the latest UX and developer features into the editing experience. To assist with upgrading the editor we have put together a migration guide you can use here - https://www.tiny.cloud/blog/how-to-migrate-from-tinymce-4-to-tinymce-5/

If you have any questions or concerns, you can contact me at community-qa@tiny.cloud. You can also join the discussion on our mailing list at the following link: community-qa+subscribe@tiny.cloud.