▼
Streaming live at 10am (PST)

Editor - selected text editing tools sitting under text

#1

Hi there,

On this site https://ekara.webflow.io/ there’s an unusual problem in the Editor mode - when selecting editable text we can’t use the edit tool as it appears in a layer behind the text; attempting to select any of the options makes it disappear. The attached image shows what’s going on. Normal editing works, one can delete and create new text, but the bold, italcs, or the link tool are not usable.

designer-edit-problem
designer-edit-problem.jpg1087×533 327 KB

This site does have a fair bit of z-index usage going on in order to get the swirling lines to appear behind and over things, thought perhaps that may be causing problems but the fact that we can make basic edits to the text makes me think I should be able to use the other tools. (As a test, have just made a change to the parent div of the text shown below - gave it z-index:200 so it would be higher z-index than the swirl. On selecting text in the section shown below with new z-index the editing tools did not appear at all, though I could still make basic editing changes).

Any ideas what could be going on? Or how to make it so that the editing tool work as they should do?

Cheers
Grant

Here is my site Read-Only: https://preview.webflow.com/preview/ekara?utm_source=ekara&preview=346b896e1e9934d86220b7fb27c09749
(how to share your site Read-Only link)

#2

Hi @grantsenior, thanks for the post. One issue is that the container is set to a z-index of 10000, which is quite high and might be the culprit:

10%20AM
Image 2019-04-22 at 8.30.10 AM.png2966×560 162 KB

I would recommend to remove the z-index on that container class “container-956 cntrl-z” and then republish.

Let me know if that helps

#3

Hi Cyberdave,

Thanks for that speedy answer! I’ll check it and see. Hold on.

Grant

#4

Hi there.

I changed the z-index to 200, the problem is still there.

Grant

#5

Hi @grantsenior, thanks, I am investigating further and as soon as I have more info, I will make an update to this post.

Thanks in advance

#6

Hi CyberDave,

Any news oregarding this problem?

Grant

#7

@grantsenior, try setting the z-index to anything 23 or lower.

#8

Hello.

I adjusted the container with the swirl graphic to 23 (assumed you mean that one?). It didn’t make any difference.

Or did you mean they should all be in a range of 23 or below?

Thanks for you attention on the problem though.

Grant

#9

Hi @grantsenior

Hope you don’t mind another one jumping in here, the container with the swirls, and your text container should be set to below 24 for now, this solves the issue.

The editing toolbar that shows has a z-index of 24 and should be higher, which is why your text is covering it. This will likely occur for other users too, so thank you for bringing it to our attention!

Here’s a quick video of the solution:

https://cl.ly/1cd9e3c7bf81 (I cut the publish bit out, but don’t forget that before checking it again :smiley: )

Please let me know if this worked or if we can help with anything else! :bowing_man:

2 Likes
#10

Awesome! Thanks, that has indeed worked.
Grant