JSON Editor Cursor Position is wrong

When entering text the cursor seem

The blue line shows where the cursor should be, but instead it's located like 5 chars to the right,
making it difficult to edit JSONs

Hey @Haim!

This seems like a bug but I haven't been able to reproduce it on my end :thinking: Is this happening with every JSON editor in your instance? Would you mind sharing the configuration of one?

Happens even for a fresh JSON Editor dragged from the right pane.
Analyzing it from a DOM perspective, the transform: the ace_cursor div has fuzzy transform: translate(4px,0px); operations... the x axis jumps are sometimes 11px and sometimes 7px.

Let me know if there's anything I can help with

:thinking: this seems to reproduce with different fonts, have you set the font for your app using custom CSS by any chance?

Could you try setting the font of the JSON editor specifically using the following CSS and let me know if that helps the issue?

#jsoneditor * {
  font-family: "Roboto Mono", SFMono, consolas, moaco, monospace
1 Like

This solves the issue, however, had to add a !important. I'll fix it tho, Thanks!

1 Like