Skip Navigation

[Resolved] Problem with Visual Editor in Layouts

This support ticket is created 8 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 13 replies, has 2 voices.

Last updated by Beda 7 years, 8 months ago.

Assisted by: Beda.

Author
Posts
#426459

When I create a new 'Fields, text and media' cell using Layouts, then all the tools in the Tiny MCE editor work correctly.

However, when I go back in to edit a cell, then I cannot change the color of the text or the size. Those two drop down boxes stop working.

Can you tell me if this is a known bug please.

Regards

Robert

#426565
Bildschirmfoto 2016-08-22 um 15.04.45.png

You mean the Visual Editor Cell, right?
(see ScreenShot)

I can edit those just fine also after save.

It must be a JS Conflict.

1. Does the issue also persist with a WordPress Default Theme and NO Plugins BUT the Toolset Plugins?

If not, could you then re-enable the Plugins one after the other, and check the issue each time you enable a plugin?
Please report me when the issue comes back
It might also be due to the Theme.
Please do reactivate your Theme only after you are sure the issue isn't coming form a 3rd Party Plugin.

2. The issue you are experiencing could also be localizable if you activate the WP Debug Mode in your wp-config.php file.

WordPress includes a debug mode which helps reveal PHP problems.

To enable it, open your wp-config.php file and look for

define('WP_DEBUG', false);

Change it to:

define('WP_DEBUG', true);

In order to enable the error logging to a file on the server you need to add yet one more similar line:

define( 'WP_DEBUG_LOG', true );

In this case the errors will be saved to a debug.log log file inside the /wp-content/directory.

Depending on whether you want your errors to be only logged or also displayed on the screen you should also have this line there, immediately after the line mentioned above:

define( 'WP_DEBUG_DISPLAY', true );

The wp-config.php is located in your WordPress root directory. It’s the same file where the database configuration settings are. You will have to access it by FTP or SFTP in order to edit it.
If you open wp-config.php and that define statement is not there, you can add it right before this line:

/* That's all, stop editing! Happy blogging. */

This will most likely include messages from other plugins, your theme and sometimes even WordPress core. The messages appear all over the place.
Sometimes they appear right on top, but they can also appear in the middle of the page.

Please report to me the errors you are seeing.

3. Please also open your Browser Console to see if any JS errors are happening while you edit the Cell

Please report any results back to me so we can proceed.

#426858

Hi Beda

I have removed all plugins apart from Toolset. I am using the Toolset Starter Theme. Problem remains.

I have updated the wp-config.php file, so it looks like this;

define('WP_DEBUG', true);
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );
/* That's all, stop editing! Happy blogging. */

There are no error codes appearing on screen when I try to e.g. click on the change color icon in the layouts Tiny MCE editor. The Tiny MCE editor in the post creation editor works fine.

Access to my site is available on request.

Regards

Robert

#426976

I can not reproduce this.

I would need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

❌ Please backup your database and website ❌

✙ I would, if possible, need access to a site where only a minimal set of Plugins and a default theme is active.
This to avoid eventual compatibility issues with other software.

✙ I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site.
This is also a reason the backup is really important

✙ Please add the Links to:

- The Layouts Edit Screen

If I can replicate that on your end, I will need a Duplicator Package in any case to duplicate it locally.

If you prefer you can go ahead and send me that straight away.
We usually recommend the free Plugin "Duplicator" for this porpoise.

If you already know how Duplicator works
(http://wordpress.org/plugins/duplicator/),
please skip the following steps and just send me the installer file and the zipped package you downloaded.

★ Duplicator Instructions
hidden link
Send me both files (you probably want to use DropBox, Google Drive, or similar services, as the snapshot file will be quite big)

❌ IMPORTANT ❌
Remember to create or keep an admin account for me before creating the snapshot, or I won't be able to login. You may delete the new admin account once the snapshot has been built.

I will enable your next answer as private so you can provide me the information securely.

#427289

I see JS errors that are not there when you install Layouts on a new WordPress and a Localhost where the servert Settings are under control.

unreachable code after return statement[Weitere Informationen]main.js:844:4

The Buttons do not expand, means, the event sets the header to be expanded but the whole HTML for the DropDown is not loaded.

This does definitely not happen on other installs of the same Toolset.

I suspect a File corruption, also given what Nigel is debugging there.

What I can do is test your site locally, see what happens here, and if (what I expect) all works fine, I am at the end of possible solutions, as we do not support server Issues, strictly speaking.

You would then need to get in touch with your Server Admin and ask for an Error Log and ask if there are some mod_security or other restrictions that can cause AJAX load failure, Plugin Upload failure or other resrictions.

You can send me a Duplicator if you want.
We usually recommend the free Plugin "Duplicator" for this porpoise.

If you already know how Duplicator works
(http://wordpress.org/plugins/duplicator/),
please skip the following steps and just send me the installer file and the zipped package you downloaded.

★ Duplicator Instructions
hidden link
Send me both files (you probably want to use DropBox, Google Drive, or similar services, as the snapshot file will be quite big)

❌ IMPORTANT ❌
Remember to create or keep an admin account for me before creating the snapshot, or I won't be able to login. You may delete the new admin account once the snapshot has been built.

I will enable your next answer as private so you can provide me the information securely.

#427338

The errors appear in your Browser Console.

If you use Firefox, you can follow this Guide:
hidden link

It's in the "console" tab.

Yes, let's see what Nigel figures out, I highly suspect a File corruption.

#427744
Image-2.jpg
Image-1.jpg
image-3.jpg

Hi Beda

First to say that the other issue with my site, which Nigel was supporting on, is resolved. We moved the site to a new physical server (same provider) and I can now upload Toolset plugins with no issues. I have reinstalled all the Toolset plugins so we should have reasonable confidence that there are no further data corruptions.

However I still have a problem with the Layouts Tiny MCE editor. So I did some further investigations. Here’s what I found relating to the problem with the color or text size popup selectors

If you scroll and move the position of the Layouts edit screen, and then go in to edit a Visual Editor Cell, then the amount of dropdown which is visible (when clicked) changes. So position of the popup dropdown selector on the screen is being affected by where its layouts cell is on the screen. I have checked and re-checked and this is what is happening. If you go in and edit Layout ‘Home 2’ and scroll Row 3 up and down on the screen, then go in and change the size or color of the text, then you will see that the amount of popup selector visible varies from none to all. The amount visible depends on the position of row 3 on the main edit screen.

I’ve tried this on three machines and three different browsers.

I’ve attached some screen shots which I hope will help understand what I can see my end.

Regards

Robert

#427849

I do not fully understand what you mean by "Scroll and Move tha layouts screen"

YOu can scroll it, yes, but that has no effect on the position of the PopUps locally.

Moving is not possible, unlesss I miss something.

Can you graba short video of this?

I can tell, the CSS is perfectly the same, but something chagnes the top border of your Screen to a minus (ca) 500px value.

This makes the PopUps disappear behind the top.
Those have a top: 215px; value, and you could actually address that in your theme CSS by increasing this calue by ca. 500 px addressing div.mce-container.mce-panel.mce-floatpanel.mce-popover.mce-bottom.mce-start

But that is not what we want,we need to see why your Top Border is assumed to be higher then usual.

I did not see any Custom CSS in your theme that could affect this.
So it has to do with the actions you take previous to this, it would be great to have a Video of this.

#428311

Hi Beda

Okay I made a movie on my iMAC to show the problem. I have uploaded into my site's media library and its called ScreenRecord.mov Hopefully you can retrieve it from the server uploads folder as I could not find any other way to give it to you!

Have a look in the movie to see what happens when you edit Row 6. First time is okay. Then I scroll down the layouts screen a bit and try to edit again, then I scroll down some more and finally the change color dropdown is off the screen!

You can try this yourself with Layout called Test PopUps which I created. How much this is a problem depends on the screen resolution of your monitor.

So you don't notice this problem when you only have a few rows created in a Layout, but once you start to add more rows, it means that the rows further down the screen become impossible to edit with the drop down boxes. Try editing the text color in row 16 for example.

I hope this is enough information to help move forward this issue.

Regards

Robert

#429126

I was able to replicate, but I can not fix it yet.

Giving the box a fixed position in CSS would solve the problem, but somehow it does not work as expeted.

Simply put, CSS applied to those DIV ID's and Classes is simply not applied.

I also tried this is in the WordPress Standard editor and there as well you can not succesfully customize it.

I need to consult this with the second Tier.

#435856

Hi Beda

Could you please give me an update on this issue.

Thanks

Robert

#435917

Yes, Sure.

The plan is to release this fix with the next version of Layouts (1.9)

Currently there is no fix developed yet, but our Developers are on this.

I will update you here as soon I have other news.

#441312

I will change this to "Fixed in next release" as we plan to provide the solution in Layouts 1.9

I will keep you up to date in regard.

#483568

Layouts beta 3 is out, which should include all needed fixes.

Please let me know if you have any more questions, and please accept my apologies for the lengthy wait

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.