Completion overlay is being improperly positioned

I’m attempting to build a markdown editor for my app, and behaviorally things are working extremely well but styling it has been extremely difficult.

The issue I’m running into is that the completion overlay (the classes applied to it are cm-tooltip-overlay, cm-tooltip, and cm-tooltip-below) seems to display fairly inconsistently. Sometimes, it will display as expected. Other times it appears to place itself below the editor entirely relative to where the cursor is in the viewport (see images):

Any idea how to fix this? All the display code at play is available in the gist here:

Do you have any transform or isolate styles on parent elements of the editor?

@marijn on any ancestor? Or on the direct parent? There’s both isolate and translate in the dom, but they’re on peers not parents in this context.

I had position: relative on both the view div and also a grandparent of it recently, but I just removed it to no effect

On any ancestor. By default, the editor uses position: fixed elements appended to its wrapper element for tooltips, but due to the mess that is CSS, the behavior of such positioned elements is changed by transform and overlay styles up the tree. You might be able to use the parent option to tooltips to work around this.

1 Like

That was absolutely the tip I needed. I wasn’t doing any configuration there, and being able to set the parent and also the config element in that extension fixed it immediately.

Cheers and thank you for the help (and the deeply incredible library)