Overlapping ACE Editors causes text from both editors to appear in same spot

[quigleyj97]

This is an issue we've been running into, our app has the user dragging elements around, some of which could be ACE editor elements. However, when one is dragged on top, both render on the same layer. Here's a JSFiddle demonstrating the issue:

https://jsfiddle.net/ypfLnfbo/

Here's a screenshot:

Expected behavior would be that editor2 simply renders over and obscures the overlapped part of editor1.

Wrapping them in containing

tags does not help, even if background is explicitly set. Example of this:

https://jsfiddle.net/u5jzu5et/1/

[nightwing]

Interesting.
This happens because lements in both editors have same z-index.
You can add z-index: 0; to the editor to create new stacking context for it.

We probably should add it by default, but i am not sure if that can cause problems for some users.

[quigleyj97]

@nightwing Thank you! This is a good workaround. I did some poking around and it seems there's a css property that might help; isolation.

Setting isolation: isolate; works as well as z-index: 0;, except in IE (haven't tested firefox), demonstrated here:
https://jsfiddle.net/ypfLnfbo/1/

[haumacher]

Would be great to set theses styles by default, makes it work in IE and Firefox:

.ace_editor {
	z-index: 0;
	isolation: isolate;
}

[kpayson]

I had this problem when the editor was inside a dive with style float:left I had to change the way I did my styling. When I removed the float and changed the div to display:inline-block; the problem went away.

[github-actions]

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.